# Языки написания спецификаций. Задание 2
Автор: **Величко Арсений, ИВТ 4**

Тема моей ВКР - "Оптимизация выполнения serverless-функций на облачных инфраструктурах на основе импортозамещения". Разрабатываемый программный продукт представляет собой программный комплекс для автоматизированного запуска и замера производительности serverless-функций на облачной инфраструктуре импортозамещения, включающий набор тестовых сценариев, модуль сбора метрик и инструмент сравнения показателей до и после оптимизации. В качестве пользовательского интерфейса реализуется веб-портал с визуализацией результатов испытаний и формулировкой рекомендаций по эффективному развертыванию и конфигурации функций.

# Диаграммы
Для генерации диаграмм использовался ИИ ChatGPT o4-mini-high от OpenAI. Промпт:

> Ты - студент четвертого курса специальности "Информатика и вычислительная техника". Ты пишешь ВКР по теме "Оптимизация выполнения serverless-функций на облачных инфраструктурах на основе импортозамещения". Разрабатываемый программный продукт представляет собой программный комплекс для автоматизированного запуска и замера производительности serverless-функций на облачной инфраструктуре импортозамещения, включающий набор тестовых сценариев, модуль сбора метрик и инструмент сравнения показателей до и после оптимизации. В качестве пользовательского интерфейса реализуется веб-портал с визуализацией результатов испытаний и формулировкой рекомендаций по эффективному развертыванию и конфигурации функций.
> 
> Используя PlantUML, создай набор диаграмм, раскрывающих функционал разрабатываемого продукта в рамках ВКР. Диаграммы должны раскрывать динамическую и статическую сущность разрабатываемого продукта.
> 
> Необходимо реализовать следующие диаграммы: 
> - вариантов использования (use case);
> - классов (classes);
> - последовательности (sequence);
> - диаграмма состояний (state);
> - диаграмма деятельности (activity).
> 
> Для названия элементов используй русский язык

## Диаграмма вариантов использования (Use Case)
Показывает, кто (акторы) взаимодействует с системой и какие функции (варианты использования) она поддерживает. Помогает зафиксировать требования на высоком уровне: какие сценарии выполнения задач имеются у пользователей и как они входят/выходят за границы системы.

### Исходный код диаграммы

```plantuml
@startuml UseCase
title Диаграмма вариантов использования комплекса тестирования Serverless
left to right direction
actor ОблачныйИнженер as "Облачный инженер"
rectangle "Комплекс тестирования Serverless" {
  (Настроить тестовые сценарии) as UC1
  (Запустить тесты) as UC2
  (Просмотреть результаты) as UC3
  (Сгенерировать рекомендации) as UC4
}
ОблачныйИнженер --> UC1
ОблачныйИнженер --> UC2
ОблачныйИнженер --> UC3
ОблачныйИнженер --> UC4
@enduml
```

### Результат

![Use Case Diagram](diagrams/UseCase.png)

## Диаграмма классов (Class Diagram)
Отображает статическую структуру системы: её классы (или сущности), их атрибуты и методы, а также связи между ними (наследование, ассоциации, зависимости и т. д.). Помогает понять, из каких компонентов строится приложение и как они взаимодействуют на уровне типов.

### Исходный код диаграммы

```plantuml
@startuml ClassDiagram
title Диаграмма классов системы тестирования Serverless
class СценарийТеста {
  +id: String
  +имя: String
  +конфигурация: Map<String, Object>
  +выполнить(): Результат
}
class Оптимизатор {
  +оптимизировать(сценарий: СценарийТеста): СценарийТеста
}
class СборщикМетрик {
  +собратьМетрики(результат: Результат): Метрики
}
class ИнструментСравнения {
  +сравнить(до: Метрики, после: Метрики): ОтчетСравнения
}
class ГенераторРекомендаций {
  +сгенерироватьРекомендации(отчет: ОтчетСравнения): List<String>
}
class ВебПортал {
  +показатьРезультаты(отчет: ОтчетСравнения)
  +показатьРекомендации(рекомендации: List<String>)
}
class Результат {
  +данные: Object
}
class Метрики {
  +время: Integer
  +ресурсы: Map<String, Integer>
}
class ОтчетСравнения {
  +улучшения: Map<String, Double>
}

СценарийТеста --> Результат : "1"
Оптимизатор --> СценарийТеста : оптимизирует
СборщикМетрик --> Метрики : собирает
ИнструментСравнения --> ОтчетСравнения : создает отчет
ГенераторРекомендаций --> "List<String>" : рекомендации
ВебПортал --> ОтчетСравнения : отображает отчет
ВебПортал --> "List<String>" : отображает рекомендации
@enduml
```

### Результат

![Class Diagram](diagrams/ClassDiagram.png)

## Диаграмма последовательности (Sequence Diagram)
Показывает динамику взаимодействия между объектами или компонентами в ходе выполнения конкретного сценария. По горизонтали — участники, по вертикали — временная шкала: кто и в каком порядке вызывает какие методы, и какие ответы получает.

### Исходный код диаграммы

```plantuml
@startuml SequenceDiagram
title Диаграмма последовательности выполнения тестов Serverless
actor ОблачныйИнженер
participant ВебПортал
participant ДвижокТестирования as TestEngine
participant Оптимизатор
participant СборщикМетрик
participant ИнструментСравнения
participant ГенераторРекомендаций

ОблачныйИнженер -> ВебПортал: настроитьТест(конфигСценария)
ВебПортал -> ДвижокТестирования: запуститьТест(конфигСценария)
ДвижокТестирования -> Оптимизатор: оптимизировать(сценарий)
Оптимизатор --> ДвижокТестирования: оптимизированныйСценарий
ДвижокТестирования -> СборщикМетрик: собратьМетрики(оптимизированныйСценарий)
СборщикМетрик --> ДвижокТестирования: метрикиОптимизированного
ДвижокТестирования --> ВебПортал: результатыОптимизированного
ВебПортал -> ДвижокТестирования: запуститьТест(оригСценарий)
ДвижокТестирования -> СборщикМетрик: собратьМетрики(оригСценарий)
СборщикМетрик --> ДвижокТестирования: метрикиОригинала
ДвижокТестирования -> ИнструментСравнения: сравнить(метрикиОригинала, метрикиОптимизированного)
ИнструментСравнения --> ВебПортал: отчетСравнения
ВебПортал -> ГенераторРекомендаций: сгенерироватьРекомендации(отчетСравнения)
ГенераторРекомендаций --> ВебПортал: рекомендации
ВебПортал --> ОблачныйИнженер: отобразить(отчетСравнения, рекомендации)
@enduml
```

### Результат

![Sequence Diagram](diagrams/SequenceDiagram.png)

## Диаграмма состояний (State Diagram)
Описывает жизненный цикл единственного объекта или сущности: набор возможных состояний, в которых он может находиться, и переходы между ними (события и условия перехода). Полезна для моделирования поведения компонентов с явно выраженными стадиями.

### Исходный код диаграммы

```plantuml
@startuml StateDiagram
title Диаграмма состояний процесса тестирования Serverless
[*] --> Создано
Создано --> Оптимизировано : оптимизировать()
Оптимизировано --> Выполняется : выполнить()
Выполняется --> МетрикиСобраны : собратьМетрики()
МетрикиСобраны --> Сравнение : сравнить()
Сравнение --> Рекомендации : сгенерироватьРекомендации()
Рекомендации --> Просмотр : просмотреть()
Просмотр --> [*]
@enduml
```

### Результат

![State Diagram](diagrams/StateDiagram.png)

## Диаграмма деятельности (Activity Diagram)
Моделирует процесс или рабочий поток: последовательность действий (активностей), ветвления, параллельных потоков и точек синхронизации. Помогает визуализировать бизнес-процессы или алгоритмы внутри системы.

### Исходный код диаграммы

```plantuml
@startuml ActivityDiagram
title Диаграмма активности процесса тестирования Serverless
start
:Настроить тестовый сценарий;
:Оптимизировать сценарий;
:Запустить оптимизированный тест;
:Собрать метрики оптимизированного теста;
:Запустить оригинальный тест;
:Собрать метрики оригинального теста;
:Сравнить метрики;
:Сгенерировать рекомендации;
:Отобразить результаты;
stop
@enduml
```

### Результат

![Activity Diagram](diagrams/ActivityDiagram.png)

# Код на Python

Для предложенной диаграммы классов был сгенерирован Python модуль. Для генерации кода использовался IDE Cursor и ИИ Claude 3.7 Sonnet от Anthropic. Промпт:

> Given this class diagram, generate a Python module containing all the classes and relationships. Translate all class, method and field names into English. Do not implement the methods, but define their signatures. Use modern Python 3.12 syntax. Follow PEP8 style. Do not write comments. Clean code

### Результат

```python
from typing import Any
from dataclasses import dataclass


@dataclass
class Result:
    data: Any


@dataclass
class Metrics:
    time: int
    resources: dict[str, int]


@dataclass
class ComparisonReport:
    improvements: dict[str, float]


class TestScenario:
    def __init__(self, id: str, name: str, configuration: dict[str, Any]) -> None:
        self.id = id
        self.name = name
        self.configuration = configuration
    
    def execute(self) -> Result:
        pass


class Optimizer:
    def optimize(self, scenario: TestScenario) -> TestScenario:
        pass


class MetricsCollector:
    def collect_metrics(self, result: Result) -> Metrics:
        pass


class ComparisonTool:
    def compare(self, before: Metrics, after: Metrics) -> ComparisonReport:
        pass


class RecommendationGenerator:
    def generate_recommendations(self, report: ComparisonReport) -> list[str]:
        pass


class WebPortal:
    def show_results(self, report: ComparisonReport) -> None:
        pass
    
    def show_recommendations(self, recommendations: list[str]) -> None:
        pass
```

# Прототип интерфейса

Не так просто перенести резульат работы LLM в популярные платформы для прототипирований интерфейсов, такие как Figma. Однако, LLM отлично справляются с написанием frontend кода. Используя IDE Cursor и ИИ Claude 3.7 Sonnet от Anthropic, я сгенерировал прототип веб приложения. Для этого был использован следующий промпт:

> You are a senior frontend developer tasked with creating a wireframe for a new application your company is developing. Your Russian-speaking boss provided you with this product description:
> 
> Разрабатываемый программный продукт представляет собой программный комплекс для автоматизированного запуска и замера производительности serverless-функций на облачной инфраструктуре импортозамещения, включающий набор тестовых сценариев, модуль сбора метрик и инструмент сравнения показателей до и после оптимизации. В качестве пользовательского интерфейса реализуется веб-портал с визуализацией результатов испытаний и формулировкой рекомендаций по эффективному развертыванию и конфигурации функций.
> 
> Come up with a web interface for this application and prerpare a basic wireframe using a modern frontend development stack of your choice. Make sure to implement the home page, a page with in-depth testing and performance insights, and a page for configuring the testing. Use fake data for your graphs and charts and populate all the text fields with appropiate sample text. Use Russian as the main language for the interface and sample data. Place all your code inside the "wireframe" directory. Refer to the attached README.md file for some technical aspects of the supposed app. Then, prepare a Dockerfile for your application. Give this task all you have as your annual bonus is on the line.

Приложение находится в директории "wireframe". Приложение может быть запущено командой `docker-compose up --build`.

### Скриншоты

![Screenshot](assets/home-page.png)

![Screenshot](assets/test-page.png)

![Screenshot](assets/results-page.png)

![Screenshot](assets/config-page.png)
