drholy/ozone-tech_owl_prime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: redesign product demo UI

Browse Source
This commit is contained in:
root
2026-07-04 12:14:08 +02:00
parent cb38cd0002
commit a7025ca50c
20 changed files with 2546 additions and 2207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
docs/DEMO_SCRIPT.md
View File

@@ -1,79 +1,97 @@
# Demo Script
Open https://arhipovdan.ru/ and switch Header to `Guided Demo`.
Open https://arhipovdan.ru/ (или http://127.0.0.1:3100/).
Страница — product demo: Hero → Demo → Storyline → Scenarios → Criteria → Engineering Details.
## 30-Second Pitch
"We built an engineering simulation of the OZON sorting cell. It models the full loop: detection -> classification -> command -> routing. We cover happy paths to B/C/D, fault handling, and timing. The Guided Demo view shows the live proof."
«Мы сделали инженерную симуляцию сортировочной ячейки OZON. Полный цикл: detection → classification → command → routing. Показываем happy path B/C/D, fault handling и timing. Главный экран — product demo, инженерные панели ниже.»
## 3-Minute Guided Demo
## 3-Minute Demo
1. Open **Guided Demo**.
2. Click **Start Guided Demo**.
3. Point to the **Current Proof Card** and the **Scene**.
- "Watch how detection leads to classification and routing."
4. Click **Next** to show `Oversized item to C`.
- "Dimensions fail first, priority C."
5. Click **Next** to show `Round object to D`.
- "Dimensions pass, but roundness triggers D."
6. Click **Next** through `Boundary`, `Low confidence`, `Jam`, `Emergency stop`.
- On faults: click "Apply fault scenario" to confirm.
- "The line stops safely on emergency."
1. На первом экране укажите Hero: что это за система и цепочку Detection → Classification → Command → Routing.
2. Нажмите **Запустить демо**.
3. В блоке **Главное демо** покажите упрощённую сцену и карточку результата:
- товар;
- категория B/C/D;
- причина решения;
- команда `ROUTE_TO_*`;
- целевая зона.
4. Нажимайте **Next step**, следите за **Этапами цикла**.
5. В **Сценариях** нажмите **Показать** на «Негабарит» — приоритет C.
6. Затем «Круглый объект» — зона D.
7. Затем «Застревание» или «Аварийная остановка» — FAULT / EMERGENCY_STOP, Reset.
## 5-Minute Guided Demo
## 5-Minute Demo
Use all 10 demo steps in Guided Demo View:
Пройдите сценарии по карточкам:
1. System overview.
2. Normal item to B.
3. Oversized item to C.
4. Round object to D.
5. Boundary dimensions.
6. Low confidence fallback.
7. Close items queue.
8. Jam / fault handling.
9. Emergency stop.
10. Performance and synchronization.
1. Обычный товар — B/C/D поток.
2. Негабарит — C.
3. Круглый объект — D.
4. Пограничные размеры — строгие min/max.
5. Низкая уверенность CV — fallback.
6. Очередь товаров — queue/spacing.
7. Застревание — FAULT.
8. Аварийная остановка — EMERGENCY_STOP.
For each step:
Для каждого:
1. Read the **Demo Narration Card**.
2. Use **Next** or the **Primary Action Button**.
3. Point to the highlighted values in the **Proof Card**.
4. Read the **Presenter Phrase** from the screen.
1. Нажмите **Показать**.
2. **Start demo** / **Next step**.
3. Укажите категорию, причину и маршрут на карточке результата.
4. Покажите активный шаг в Storyline Stepper.
## What to say on each step
## Engineering Details
Use the `presenterPhrase` text shown in the **Demo Narration Card**. It is specifically written to be short and clear for the jury.
Если жюри просит PID, event log, sensors или полный layout:
## What to do if demo gets stuck
1. Нажмите **Инженерный режим** (header / hero / demo).
2. Откроется секция **Engineering Details** с полными панелями.
3. Полная сцена — `SorterScene variant="full"`.
- Click **Reset Demo**.
- If still stuck, switch back to **Engineering Mode** and use manual scenario selection.
- Proceed manually.
## Что делать, если демо зависло
## Fallback If Domain Does Not Open
1. **Reset** в header или в блоке демо.
2. Выберите сценарий заново карточкой **Показать**.
3. При необходимости откройте Engineering Details и смените сценарий там.
1. SSH to server.
2. Check local frontend:
## Fallback, если домен не открывается
1. SSH на сервер.
2. Проверьте локальный frontend:
```bash
curl -I http://127.0.0.1:3100/
```
3. Check Docker project:
3. Проверьте Docker:
```bash
docker compose -p owl -f /opt/arhipovdan/app/docker-compose.server.yml ps
```
4. If screenshots/video are prepared later, show them while explaining the same demo steps.
## Mobile / no horizontal scroll
## What Each Screen Proves
Перед защитой проверьте:
- SVG scene proves physical route and actuator command.
- Classification panel proves why category B/C/D was selected.
- Timeline proves synchronization and step-by-step behavior.
- PID panel proves conveyor control-loop behavior.
- Event Log proves traceability.
- Criteria panel proves coverage of OZON evaluation points.
- 1920×1080 — hero + demo читаемы, CTA видны;
- 1440×900 — нет debug-dashboard на первом экране;
- 390×844 — одна колонка, крупные кнопки, сцена не вылезает.
В консоли:
```js
document.documentElement.scrollWidth <= document.documentElement.clientWidth
```
## What Each Block Proves
- Hero — смысл проекта за 10 секунд.
- Product Demo scene — физический маршрут и команда.
- Proof card — почему выбрана категория B/C/D.
- Storyline — текущий этап цикла.
- Scenario cards — jury test cases без узкого скролл-списка.
- Criteria cards — покрытие критериев OZON.
- Engineering Details — timeline, PID, event log, sensors.

30
docs/JURY_QA.md
View File

@@ -10,23 +10,23 @@ The animation is driven by a deterministic state machine, classifier, sensor sta
## 3. How Do You Prove The Route Was Correct?
The decision tree shows thresholds and PASS/FAIL, the scene shows the selected command and route arrow, and Event Log records state, command/category and item id.
The proof card shows category, reason and `ROUTE_TO_*`. The scene highlights the selected route arrow and zone B/C/D. Event Log in Engineering Details records state, command and item id.
## 4. Where Are OZON Rules Reflected?
The rules are explicit in classification limits: min/max dimensions, roundness threshold and C priority. Criteria Coverage maps these rules to scenarios and docs.
The rules are explicit in classification limits: min/max dimensions, roundness threshold and C priority. Criteria Cards map these rules to scenarios. Full checklist is in Engineering Details.
## 5. How Does The Operator Safely Stop The System?
The `emergency_stop` scenario enters `EMERGENCY_STOP`, stops conveyor target speed and requires Reset. In Presentation Mode, Safe Demo requires confirmation before fault scenarios.
Open scenario **Аварийная остановка**. The system enters `EMERGENCY_STOP`, stops conveyor target speed and requires Reset.
## 6. What Happens On Sensor Failure Or Low Confidence?
Low confidence is logged as a warning. The system still applies deterministic dimensions/roundness rules as a fallback and shows this in the panel.
Low confidence is logged as a warning. The system still applies deterministic dimensions/roundness rules as a fallback and shows this on the proof card.
## 7. Why 2D, Not 3D?
2D is enough for MVP validation: it shows geometry, timing, sensor positions, routes and state transitions without spending effort on heavy rendering.
2D is enough for MVP validation: it shows geometry, timing, sensor positions, routes and state transitions without heavy rendering.
## 8. What Is Needed For A Physical Prototype?
@@ -38,7 +38,7 @@ The MVP uses pseudo-CV: bbox, dimensions, confidence and latency are derived fro
## 10. How Is Classification Correctness Proven?
The decision tree shows PASS/FAIL for dimensions and roundness, actual values, thresholds and final category. Tests cover key boundary cases.
The proof card shows dimensions, roundness and reason. Tests cover key boundary cases. Engineering Details has the full decision evidence and criteria checklist.
## 11. How Are Dimensions And Circular Section Handled?
@@ -50,7 +50,7 @@ Oversized or undersized items are operationally unsafe for the main line and mus
## 13. How Is Synchronization Shown?
Cycle timeline shows state order, simulated timestamps, durations and status: done, active, pending or skipped.
Storyline Stepper shows the active stage. In Engineering Details, Cycle Timeline shows state order, timestamps, durations and status: done, active, pending or skipped.
## 14. How Does The Actuator Part Work?
@@ -58,16 +58,24 @@ The stop-gate fixes the item. B opens the gate, C extends pusher C, D extends pu
## 15. What Happens On Jam?
The system enters FAULT, conveyor target speed becomes 0, actual speed decays toward 0, and Reset is required.
Open scenario **Застревание**. The system enters FAULT, conveyor target speed becomes 0, actual speed decays toward 0, and Reset is required.
## 16. Why is the interface a Product Demo Page now?
To avoid cognitive overload during the pitch. The jury needs to understand the decision and see the route clearly without distraction from raw JSON logs or PID graphs, especially on laptop projectors or mobile devices.
To avoid cognitive overload during the pitch. The jury needs to understand the decision and see the route clearly without distraction from raw logs or PID graphs on the first screen.
## 17. How does the Demo prove engineering realism?
Even in the Product Demo Section, the scene and proof card are driven by the real underlying state machine, classifier, and metric engine—not a pre-rendered video.
Even in the Product Demo Section, the scene and proof card are driven by the real state machine, classifier and metrics — not a pre-rendered video.
## 18. Where to see the full event log and PID?
Scroll down and open the "Engineering Details (Engineering Mode)" accordion.
Scroll to **Engineering Details** or click **Инженерный режим**. Open the section to see state machine, sensors, PID, timeline, event log and full criteria checklist.
## 19. How to check mobile and no horizontal scroll?
Use widths 1920×1080, 1440×900 and 390×844. On mobile the layout is one column, buttons are large, the scene scales with `width: 100%`. In console:
```js
document.documentElement.scrollWidth <= document.documentElement.clientWidth
```

26
docs/SUBMISSION_CHECKLIST.md
View File

@@ -8,16 +8,18 @@ Before final submission:
- [ ] `https://arhipovdan.ru/` opens.
- [ ] `https://www.arhipovdan.ru/` opens.
- [ ] `https://ai-shorts.ru/` still works and was not affected.
- [ ] Presentation Mode opens.
- [ ] Demo steps checked.
- [ ] Safe Demo confirmation checked for jam/emergency.
- [ ] App is responsive on Desktop (1920x1080), Laptop (1440x900) and Mobile (390x844).
- [ ] NO horizontal scroll on body/app container.
- [ ] Product Demo layout shows step, scene, and result.
- [ ] Scenarios are displayed as cards.
- [ ] Engineering Details accordion works and shows all technical panels.
- [ ] Engineering Mode still works.
- [ ] Product Demo page opens (Hero first, not engineering dashboard).
- [ ] Start demo / Next step / Reset work.
- [ ] Storyline Stepper updates with machine state.
- [ ] Scenario cards open cases with **Показать**.
- [ ] Criteria cards show OZON coverage and linked scenarios.
- [ ] Engineering Details is collapsed by default and opens from CTA.
- [ ] Engineering Details shows full panels (state machine, sensors, PID, timeline, event log, criteria).
- [ ] App is responsive on Desktop (1920×1080), Laptop (1440×900) and Mobile (390×844).
- [ ] NO horizontal scroll on body / `#root` / product page.
- [ ] Mobile: one column, buttons ≥ 44px, scene scales.
- [ ] Scenarios checked: normal_flow, oversized_item, round_object, boundary_dimensions, close_items, low_confidence, jam, emergency_stop.
- [ ] Docs present: README, ARCHITECTURE, DEMO_SCRIPT, SCENARIOS, JURY_QA, SUBMISSION_CHECKLIST.
- [ ] Branch pushed to `origin/dan_branch`.
- [ ] Nginx backup path from deploy is known if infrastructure rollback is needed.
- [ ] Docs present: README, ARCHITECTURE, DEMO_SCRIPT, SCENARIOS, JURY_QA, UI_UX_REDESIGN_AUDIT, SUBMISSION_CHECKLIST.
- [ ] Cursor rules present in `.cursor/rules/`.
- [ ] Branch ready for manual push to `origin/dan_branch`.
- [ ] Nginx / SSL / neighboring projects were not modified.

58
docs/UI_UX_REDESIGN_AUDIT.md Normal file
View File

@@ -0,0 +1,58 @@
# UI/UX Redesign Audit
## 1. Что сейчас плохо
- Перегруженность: первый экран похож на engineering debug-dashboard.
- Horizontal scroll из-за `min-width: 1180px` и жёстких grid-колонок.
- Слабая адаптивность: mobile не в одну колонку, мелкие tap targets.
- Debug-dashboard вместо product demo: много панелей сразу.
- Мелкий текст (11–13px) и плотная типографика.
- Непонятный первый экран: не ясно, что это за система и как запустить демо.
## 2. Цель редизайна
Сделать чистый, адаптивный product demo для защиты хакатона: за 10 секунд понятно, что это, как запустить и какой результат показать. Инженерные панели сохранить, но спрятать ниже.
## 3. Новая информационная архитектура
1. Hero — смысл, CTA, цепочка Detection → Classification → Command → Routing
2. Product Demo — сцена + карточка результата + управление
3. Storyline Stepper — текущий этап цикла
4. Scenario Cards — jury-сценарии карточками
5. Criteria Cards — покрытие критериев OZON
6. Engineering Details — сворачиваемые техпанели
## 4. Компоненты: создать / изменить
| Компонент | Действие |
|-----------|----------|
| HeroSection | создать / доработать |
| ProductDemoSection | создать / доработать |
| StorylineStepper | создать / доработать |
| ScenarioCards | создать / доработать |
| CriteriaCards | создать / доработать |
| EngineeringDetails | создать / доработать |
| Header | упростить до product-nav |
| App | собрать product page |
| SorterScene | добавить `variant: full \| simple` |
| styles.css | responsive redesign |
## 5. В Engineering Details
StateMachinePanel, TimelinePanel, PidPanel, EventLog, MetricsPanel, SensorPanel, ScenarioPanel, OzonCriteriaPanel, SorterScene `variant="full"`.
## 6. Риски
- Не сломать domain logic / tests.
- Не потерять инженерные функции для жюри.
- Не затронуть nginx / соседние проекты.
- Сохранить обработчики start / step / reset / scenario select.
## 7. Definition of Done
- Нет horizontal scroll на 1920 / 1440 / 390.
- Hero понятен, CTA видны.
- Demo ведёт по цепочке Detection → Routing.
- Engineering Details свёрнуты по умолчанию.
- `npm run build` и `npm run test` проходят.
- Docker `owl` отдаёт страницу на `:3100` и доменах.