Spaces:

MesserMMP
/

syntax-video-infer

Running

App Files Files Community

MesseMMP commited on Apr 28

Commit

2faca07

1 Parent(s): e8e9dd9

new design

Browse files

Files changed (1) hide show

app.py +841 -172

app.py CHANGED Viewed

@@ -1,5 +1,3 @@
-# app.py — минимальный UI: загрузка всех DICOM → classify → per-side inference
 import os
 import base64
 import json
@@ -7,6 +5,7 @@ import tempfile
 from datetime import datetime
 from dataclasses import asdict
 from typing import List, Dict, Any
 import gradio as gr
 import pydicom
@@ -14,38 +13,508 @@ import pydicom
 from src.syntax_pred.config import CFG
 from src.syntax_pred.infer import Study, run_inference
-# ------- Логотип (base64) -------
 DEFAULT_LOGO = "assets/logo.png"
 LOGO_PATH = os.environ.get("LOGO_PATH", DEFAULT_LOGO)
 def _logo_html() -> str:
     path = LOGO_PATH
     if not path or not os.path.exists(path):
         return ""
     try:
         with open(path, "rb") as f:
-            import base64 as b64
-            data = b64.b64encode(f.read()).decode("ascii")
         ext = os.path.splitext(path)[1].lower()
         mime = "image/png" if ext in {".png", ""} else "image/jpeg"
-        return (
-            f'<img src="data:{mime};base64,{data}" alt="logo" '
-            f'style="height:40px;vertical-align:middle;display:inline-block;'
-            f'image-rendering:auto;object-fit:contain;margin-right:12px;" />'
-        )
     except Exception:
         return ""
-# ------- Вспомогательные -------
 def _is_dicom_path(path: str) -> bool:
-    """Фильтрация только настоящих DICOM (по расширению и попытке чтения)."""
     if not os.path.exists(path):
         return False
     ext = os.path.splitext(path)[1].lower()
-    if ext not in {".dcm", ""}:  # многие DICOM без расширения
         return False
     try:
         pydicom.dcmread(path, stop_before_pixels=True)
@@ -55,21 +524,25 @@ def _is_dicom_path(path: str) -> bool:
 def _files_to_paths(files) -> List[str]:
-    raw_paths = [f.name for f in (files or []) if hasattr(f, "name") and os.path.exists(f.name)]
     return [p for p in raw_paths if _is_dicom_path(p)]
 def _collect_input_paths(files_all, folder_files) -> List[str]:
     combined = _files_to_paths(files_all) + _files_to_paths(folder_files)
-    # Keep first occurrence order while removing duplicates.
     return list(dict.fromkeys(combined))
 def _build_report_file(result: Dict[str, Any]) -> str:
     ts = datetime.now().strftime("%Y%m%d_%H%M%S")
     with tempfile.NamedTemporaryFile(
         mode="w",
-        prefix=f"syntax_report_{ts}_",
         suffix=".json",
         encoding="utf-8",
         delete=False,
@@ -78,215 +551,411 @@ def _build_report_file(result: Dict[str, Any]) -> str:
         return f.name
-def _status_badge(state: str) -> str:
-    """Красивый статус с «анимацией» точек через Unicode."""
     state = state.lower()
-    if state == "running":
-        # Используем точки/круги как псевдо-анимацию
-        return "⏱️ Running · ● ○ ○"
-    if state == "done":
-        return "✅ Done"
-    if state == "error":
-        return "❌ Error"
-    return "⌛ Queued"
-def _update_status_table(studies, status: str):
-    """Пометить все исследования указанным статусом (только визуальный бейдж)."""
-    badge = _status_badge(status)
     return [
-        [s["name"], s.get("description", ""), len(s.get("files", [])), badge]
         for s in (studies or [])
     ]
 def _format_results_html(result: Dict[str, Any]) -> str:
     if not result:
-        return (
-            '<div style="padding:12px;border:1px solid #e2e8f0;border-radius:10px;">'
-            '<b>Результаты появятся после запуска inference.</b>'
-            '</div>'
-        )
     if "error" in result:
-        msg = str(result.get("error", "Unknown error"))
-        return (
-            '<div style="padding:12px;border:1px solid #fecaca;background:#fef2f2;'
-            'border-radius:10px;color:#991b1b;">'
-            f'<b>Ошибка:</b> {msg}'
-            '</div>'
-        )
     studies = result.get("studies", []) or []
     if not studies:
-        return (
-            '<div style="padding:12px;border:1px solid #e2e8f0;border-radius:10px;">'
-            'Нет исследований для отображения.'
-            '</div>'
-        )
-    cards = []
     for s in studies:
-        study = s.get("study", "-")
-        desc = s.get("description", "")
         left_mean = s.get("left", {}).get("mean", 0.0)
         right_mean = s.get("right", {}).get("mean", 0.0)
         total_obj = s.get("total", {})
         total_mean = total_obj.get("mean", 0.0)
-        risk_key = next((k for k in total_obj.keys() if "High-risk" in str(k)), "High-risk")
-        is_high_risk = bool(total_obj.get(risk_key, False))
-        badge_bg = "#fee2e2" if is_high_risk else "#dcfce7"
-        badge_fg = "#991b1b" if is_high_risk else "#166534"
-        badge_text = "Высокий риск" if is_high_risk else "Низкий риск"
-        desc_html = f"<div style='color:#64748b;margin-top:4px'>{desc}</div>" if desc else ""
-        cards.append(
-            """
-            <div style="border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#ffffff;">
-              <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;">
-                <div>
-                  <div style="font-size:18px;font-weight:700;color:#0f172a;">{study}</div>
-                  {desc_html}
-                </div>
-                <div style="padding:4px 10px;border-radius:999px;background:{badge_bg};color:{badge_fg};font-weight:700;white-space:nowrap;">
-                  {badge_text}
-                </div>
-              </div>
-              <div style="margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;">
-                <div style="background:#f8fafc;border-radius:10px;padding:10px;">
-                  <div style="color:#64748b;font-size:12px;">LEFT</div>
-                  <div style="font-size:22px;font-weight:800;color:#0f172a;">{left_mean:.3f}</div>
-                </div>
-                <div style="background:#f8fafc;border-radius:10px;padding:10px;">
-                  <div style="color:#64748b;font-size:12px;">RIGHT</div>
-                  <div style="font-size:22px;font-weight:800;color:#0f172a;">{right_mean:.3f}</div>
                 </div>
-                <div style="background:#f1f5f9;border-radius:10px;padding:10px;border:1px solid #cbd5e1;">
-                  <div style="color:#334155;font-size:12px;">TOTAL</div>
-                  <div style="font-size:24px;font-weight:900;color:#020617;">{total_mean:.3f}</div>
-                </div>
-              </div>
             </div>
-            """.format(
-                study=study,
-                desc_html=desc_html,
-                badge_bg=badge_bg,
-                badge_fg=badge_fg,
-                badge_text=badge_text,
-                left_mean=left_mean,
-                right_mean=right_mean,
-                total_mean=total_mean,
-            )
-        )
-    return "\n".join(cards)
-# ------- UI -------
-def ui():
-    with gr.Blocks() as demo:
-        gr.HTML(
-            f"""
-            <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
-                {_logo_html()}
-                <h1 style="margin:0;font-weight:800;text-align:center;flex:1;">SYNTAX-Video — Study Inference</h1>
             </div>
-            <ol style="margin:0 0 12px 20px; color:#475569; line-height:1.5;">
-              <li>Укажите ID исследования и (необязательно) описание.</li>
-              <li>Загрузите все DICOM-файлы исследования одним списком или папкой.</li>
-              <li>Нажмите “Add study”, затем “Run inference”.</li>
-            </ol>
-            """
-        )
-        studies_state = gr.State([])  # list[dict]
-        with gr.Row():
-            study_name = gr.Textbox(label="Study ID", placeholder="e.g., S1234")
-            study_desc = gr.Textbox(label="Description (optional)", placeholder="Free text...")
-        files_all = gr.File(label="All DICOM files (single study)", file_count="multiple")
-        files_folder = gr.File(label="Study folder (optional)", file_count="directory")
-        with gr.Row():
-            btn_add = gr.Button("➕ Add study")
-            btn_clear = gr.Button("🗑️ Clear all")
-        queue_table = gr.Dataframe(
-            headers=["Study", "Description", "#DICOM files", "Status"],
-            datatype=["str", "str", "number", "str"],
-            interactive=False,
-            label="Studies queue",
-            row_count=(0, "dynamic"),
-        )
-        def _add_study_fn(studies: List[Dict[str, Any]], name, desc, files, folder):
-            name = (name or "").strip() or f"Study_{len(studies)+1}"
             desc = (desc or "").strip()
             paths = _collect_input_paths(files, folder)
             if not paths:
-                # ничего не добавляем, просто обновляем таблицу текущими статусами
                 table = _update_status_table(studies, "Queued")
                 return studies, table, name, desc, files, folder
-            studies = studies + [asdict(Study(name=name, description=desc, files=paths))]
             table = _update_status_table(studies, "Queued")
             return studies, table, "", "", None, None
         btn_add.click(
             _add_study_fn,
             inputs=[studies_state, study_name, study_desc, files_all, files_folder],
-            outputs=[studies_state, queue_table, study_name, study_desc, files_all, files_folder],
         )
         def _clear_all():
             return [], []
-        btn_clear.click(_clear_all, inputs=None, outputs=[studies_state, queue_table])
-        run_btn = gr.Button("🚀 Run inference", variant="primary")
-        out_summary = gr.HTML(label="Результат")
-        with gr.Accordion("Подробно (JSON)", open=False):
-            out_json = gr.JSON(label="Results")
-        out_report = gr.File(label="Скачать отчет", interactive=False)
         def _before_run(studies):
-            # пометить все исследования как Running
             return _update_status_table(studies, "Running")
         def _run_infer(studies):
-            study_objs = [Study(**s) for s in (studies or [])]
             result = run_inference(study_objs)
             report_path = _build_report_file(result)
             return result, report_path
         def _after_run(studies, result, report_path):
             table = _update_status_table(studies, "Done")
             return _format_results_html(result), result, report_path, table
         run_btn.click(
             _before_run,
             inputs=[studies_state],
-            outputs=[queue_table],
         ).then(
             _run_infer,
             inputs=[studies_state],
-            outputs=[out_json, out_report],
         ).then(
             _after_run,
             inputs=[studies_state, out_json, out_report],
-            outputs=[out_summary, out_json, out_report, queue_table],
         )
-        gr.Markdown("⚠️ Research-only. Not a medical device. Predictions depend on input quality and domain shift.")
     return demo
 if __name__ == "__main__":
     favicon = LOGO_PATH if (LOGO_PATH and os.path.exists(LOGO_PATH)) else None
-    ui().launch(favicon_path=favicon, theme=gr.themes.Soft())

 import os
 import base64
 import json
 from datetime import datetime
 from dataclasses import asdict
 from typing import List, Dict, Any
+from pathlib import Path
 import gradio as gr
 import pydicom
 from src.syntax_pred.config import CFG
 from src.syntax_pred.infer import Study, run_inference
+# ==================== КОНФИГУРАЦИЯ ДИЗАЙНА ====================
+APPLE_STYLE_CSS = """
+/* Сбалансированная современная цветовая гамма */
+:root {
+    /* Основные фоны - более спокойные */
+    --bg-primary: #4f46e5;
+    --bg-secondary: #7c3aed;
+    --bg-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
+    --bg-surface: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.94) 100%);
+    /* Акцентные цвета - приглушенные */
+    --accent-cyan: #06b6d4;
+    --accent-teal: #3b82f6;
+    --accent-purple: #8b5cf6;
+    --accent-pink: #d946ef;
+    --accent-orange: #f97316;
+    --accent-green: #10b981;
+    --accent-red: #ef4444;
+    --accent-yellow: #eab308;
+    /* Светлые версии акцентов */
+    --accent-cyan-light: rgba(6, 182, 212, 0.08);
+    --accent-teal-light: rgba(59, 130, 246, 0.08);
+    --accent-purple-light: rgba(139, 92, 246, 0.08);
+    --accent-pink-light: rgba(217, 70, 239, 0.08);
+    --accent-green-light: rgba(16, 185, 129, 0.08);
+    --accent-red-light: rgba(239, 68, 68, 0.08);
+    --accent-orange-light: rgba(249, 115, 22, 0.08);
+    /* Текстовые цвета */
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-light: #94a3b8;
+    --text-white: #ffffff;
+    /* Границы и тени */
+    --border-color: rgba(255, 255, 255, 0.2);
+    --border-dark: rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    --shadow-glow: 0 0 0 3px rgba(6, 182, 212, 0.2);
+    --shadow-glow-purple: 0 0 0 3px rgba(139, 92, 246, 0.2);
+}
+* {
+    font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
+}
+body, .gradio-container {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%) !important;
+    position: relative;
+}
+/* Декоративные элементы фона - более мягкие */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+}
+.gradio-container {
+    position: relative;
+    z-index: 1;
+}
+/* Кастомные стили для блоков Gradio */
+.gr-box, .gr-form, .panel, .tabs, .tab-nav, .accordion {
+    background: transparent !important;
+    border: none !important;
+}
+/* Главный контейнер */
+.apple-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+}
+/* Хедер */
+.apple-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    position: relative;
+    padding: 1rem 0;
+}
+.apple-title {
+    font-size: 3.2rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+    margin: 0;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+.apple-subtitle {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.85);
+    margin-top: 0.5rem;
+    font-weight: 400;
+}
+/* Карточки */
+.apple-card {
+    background: rgba(255, 255, 255, 0.96);
+    backdrop-filter: blur(20px);
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+}
+.apple-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    background: rgba(255, 255, 255, 0.98);
+}
+.apple-card-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 100%);
+}
+.apple-card-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.apple-card-content {
+    padding: 1.5rem;
+}
+/* Специальная карточка для добавления исследования */
+.add-study-card {
+    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 100%);
+    border: 1px solid rgba(255,255,255,0.4);
+    position: relative;
+    overflow: hidden;
+}
+/* Кнопки - более спокойные градиенты */
+.apple-button {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+    color: white;
+    border: none;
+    border-radius: 980px;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+    overflow: hidden;
+}
+.apple-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+    transition: left 0.5s;
+}
+.apple-button:hover::before {
+    left: 100%;
+}
+.apple-button:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
+}
+/* Кнопка добавления - фиолетовая */
+.apple-button-add {
+    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+    color: white;
+    border: none;
+    border-radius: 980px;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+    overflow: hidden;
+}
+.apple-button-add::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+    transition: left 0.5s;
+}
+.apple-button-add:hover::before {
+    left: 100%;
+}
+.apple-button-add:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
+}
+/* Кнопка очистки - оранжевая */
+.apple-button-clear {
+    background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
+    color: white;
+    border: none;
+    border-radius: 980px;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+    overflow: hidden;
+}
+.apple-button-clear::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+    transition: left 0.5s;
+}
+.apple-button-clear:hover::before {
+    left: 100%;
+}
+.apple-button-clear:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(135deg, #ea580c 0%, #eab308 100%);
+}
+/* Поля ввода */
+.apple-input {
+    border: 1.5px solid rgba(0, 0, 0, 0.05) !important;
+    border-radius: 14px !important;
+    padding: 0.75rem 1rem !important;
+    font-size: 0.9375rem !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    transition: all 0.3s ease !important;
+}
+.apple-input:focus {
+    outline: none !important;
+    border-color: #06b6d4 !important;
+    box-shadow: var(--shadow-glow) !important;
+    background: white !important;
+}
+/* Таблица */
+.apple-table {
+    border-radius: 16px;
+    overflow: hidden;
+    border: none;
+}
+.apple-table table {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-collapse: collapse !important;
+    width: 100%;
+}
+.apple-table th {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    padding: 12px 16px !important;
+    border-bottom: none !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+}
+.apple-table td {
+    background: rgba(255, 255, 255, 0.98) !important;
+    color: var(--text-primary) !important;
+    padding: 12px 16px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+}
+.apple-table tr:last-child td {
+    border-bottom: none !important;
+}
+.apple-table tr:hover td {
+    background: rgba(139, 92, 246, 0.04) !important;
+}
+/* Стейтус бейдж - более спокойные градиенты */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.status-running {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+.status-done {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+.status-error {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+.status-queued {
+    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+/* Анимации */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.85;
+        transform: scale(1.02);
+    }
+}
+.pulse {
+    animation: pulse 1.5s ease-in-out infinite;
+}
+/* Скролл бар */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
+}
+/* Стили для двух колонок загрузки */
+.upload-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+/* Инструкция */
+.instruction-box {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(6, 182, 212, 0.06) 100%);
+    border-radius: 16px;
+    padding: 1rem;
+    margin-top: 1rem;
+    border: 1px solid rgba(139, 92, 246, 0.15);
+    backdrop-filter: blur(10px);
+}
+.instruction-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.instruction-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.5rem;
+}
+.instruction-list li {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+}
+/* Адаптивность */
+@media (max-width: 768px) {
+    .upload-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    .instruction-list {
+        grid-template-columns: 1fr;
+    }
+    .apple-title {
+        font-size: 2rem;
+    }
+}
+"""
+# Логотип (base64)
 DEFAULT_LOGO = "assets/logo.png"
 LOGO_PATH = os.environ.get("LOGO_PATH", DEFAULT_LOGO)
 def _logo_html() -> str:
+    """Генерация HTML для логотипа"""
     path = LOGO_PATH
     if not path or not os.path.exists(path):
         return ""
     try:
         with open(path, "rb") as f:
+            data = base64.b64encode(f.read()).decode("ascii")
         ext = os.path.splitext(path)[1].lower()
         mime = "image/png" if ext in {".png", ""} else "image/jpeg"
+        return f'<img src="data:{mime};base64,{data}" alt="Логотип" style="height: 36px; width: auto; border-radius: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));" />'
     except Exception:
         return ""
 def _is_dicom_path(path: str) -> bool:
+    """Проверка на DICOM файл"""
     if not os.path.exists(path):
         return False
     ext = os.path.splitext(path)[1].lower()
+    if ext not in {".dcm", ""}:
         return False
     try:
         pydicom.dcmread(path, stop_before_pixels=True)
 def _files_to_paths(files) -> List[str]:
+    """Конвертация файлов в пути"""
+    if not files:
+        return []
+    raw_paths = [f.name for f in files if hasattr(f, "name") and os.path.exists(f.name)]
     return [p for p in raw_paths if _is_dicom_path(p)]
 def _collect_input_paths(files_all, folder_files) -> List[str]:
+    """Сбор всех путей из загрузок"""
     combined = _files_to_paths(files_all) + _files_to_paths(folder_files)
     return list(dict.fromkeys(combined))
 def _build_report_file(result: Dict[str, Any]) -> str:
+    """Создание отчета в JSON"""
     ts = datetime.now().strftime("%Y%m%d_%H%M%S")
     with tempfile.NamedTemporaryFile(
         mode="w",
+        prefix=f"autoangioscore_report_{ts}_",
         suffix=".json",
         encoding="utf-8",
         delete=False,
         return f.name
+def _status_badge_html(state: str, with_animation: bool = False) -> str:
+    """Генерация HTML для статус бейджа"""
     state = state.lower()
+    status_config = {
+        "running": {"class": "status-running", "icon": "⏱️", "text": "Выполняется"},
+        "done": {"class": "status-done", "icon": "✅", "text": "Завершено"},
+        "error": {"class": "status-error", "icon": "❌", "text": "Ошибка"},
+        "queued": {"class": "status-queued", "icon": "⏳", "text": "В очереди"}
+    }
+    config = status_config.get(state, status_config["queued"])
+    animation_class = " pulse" if with_animation and state == "running" else ""
+    return f'<span class="status-badge {config["class"]}{animation_class}">{config["icon"]} {config["text"]}</span>'
+def _update_status_table(studies, status: str) -> List[List]:
+    """Обновление таблицы со статусами"""
+    badge = _status_badge_html(status, with_animation=(status == "running"))
     return [
+        [s.get("name", "-"), s.get("description", "-") or "-", len(s.get("files", [])), badge]
         for s in (studies or [])
     ]
 def _format_results_html(result: Dict[str, Any]) -> str:
+    """Форматирование результатов в красивом HTML"""
     if not result:
+        return '''
+        <div class="apple-card" style="padding: 2rem; text-align: center;">
+            <div style="color: var(--text-secondary);">
+                📊 Результаты появятся после запуска анализа
+            </div>
+        </div>
+        '''
     if "error" in result:
+        return f'''
+        <div class="apple-card" style="padding: 1.5rem; background: linear-gradient(135deg, rgba(239,68,68,0.10) 0%, rgba(220,38,38,0.10) 100%);">
+            <div style="color: var(--accent-red); display: flex; align-items: center; gap: 0.75rem;">
+                <span style="font-size: 1.5rem;">⚠️</span>
+                <div>
+                    <strong>Ошибка</strong>
+                    <div style="margin-top: 0.25rem;">{result.get("error", "Неизвестная ошибка")}</div>
+                </div>
+            </div>
+        </div>
+        '''
     studies = result.get("studies", []) or []
     if not studies:
+        return '''
+        <div class="apple-card" style="padding: 2rem; text-align: center;">
+            <div style="color: var(--text-secondary);">
+                📋 Нет исследований для отображения
+            </div>
+        </div>
+        '''
+    cards_html = []
     for s in studies:
+        study_name = s.get("study", "-")
+        description = s.get("description", "")
         left_mean = s.get("left", {}).get("mean", 0.0)
         right_mean = s.get("right", {}).get("mean", 0.0)
         total_obj = s.get("total", {})
         total_mean = total_obj.get("mean", 0.0)
+        risk_key = next((k for k in total_obj.keys() if "High-risk" in str(k)), None)
+        is_high_risk = bool(total_obj.get(risk_key, False)) if risk_key else total_mean > 0.5
+        if is_high_risk:
+            badge_bg = "#fee2e2"
+            badge_color = "#991b1b"
+            badge_text = "⚠️ Высокий риск"
+        else:
+            badge_bg = "#dcfce7"
+            badge_color = "#14532d"
+            badge_text = "✅ Низкий риск"
+        badge_style = f"""
+            background: {badge_bg};
+            color: {badge_color};
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 700;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            border: 1px solid rgba(0,0,0,0.05);
+        """
+        card_html = f'''
+        <div class="apple-card" style="margin-bottom: 1rem;">
+            <div class="apple-card-header">
+                <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;">
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 1.25rem; font-weight: 700; color: var(--text-primary);">🏥 {study_name}</span>
+                    </div>
+                    <div style="{badge_style}">
+                        {badge_text}
+                    </div>
                 </div>
+                {f'<div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem;">{description}</div>' if description else ''}
             </div>
+            <div class="apple-card-content">
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
+                    <!-- Левая артерия -->
+                    <div style="text-align: center;
+                        background: linear-gradient(135deg, rgba(6,182,212,0.10) 0%, rgba(59,130,246,0.10) 100%);
+                        border-radius: 16px;
+                        padding: 0.85rem;
+                        border: 1px solid rgba(59,130,246,0.15);">
+                        <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
+                            Левая артерия
+                        </div>
+                        <div style="font-size: 1.5rem; font-weight: 800;
+                            background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+                            -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                            {left_mean:.3f}
+                        </div>
+                    </div>
+                    <!-- Правая артерия -->
+                    <div style="text-align: center;
+                        background: linear-gradient(135deg, rgba(139,92,246,0.10) 0%, rgba(168,85,247,0.10) 100%);
+                        border-radius: 16px;
+                        padding: 0.85rem;
+                        border: 1px solid rgba(168,85,247,0.15);">
+                        <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
+                            Правая артерия
+                        </div>
+                        <div style="font-size: 1.5rem; font-weight: 800;
+                            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+                            -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                            {right_mean:.3f}
+                        </div>
+                    </div>
+                    <!-- Общий балл -->
+                    <div style="text-align: center;
+                        background: linear-gradient(135deg, rgba(249,115,22,0.10) 0%, rgba(251,191,36,0.10) 100%);
+                        border-radius: 16px;
+                        padding: 0.85rem;
+                        border: 1px solid rgba(249,115,22,0.20);">
+                        <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
+                            Общий балл
+                        </div>
+                        <div style="font-size: 1.75rem; font-weight: 900;
+                            background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
+                            -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                            {total_mean:.3f}
+                        </div>
+                    </div>
+                </div>
             </div>
+        </div>
+        '''
+        cards_html.append(card_html)
+    return "".join(cards_html)
+# ==================== ОСНОВНОЙ UI ====================
+def create_ui():
+    """Создание интерфейса в стиле Apple"""
+    with gr.Blocks(title="AutoAngioScore") as demo:
+        # Главный контейнер
+        with gr.Column(elem_classes="apple-container"):
+            # Хедер
+            with gr.Row(elem_classes="apple-header"):
+                with gr.Column(scale=1, min_width=0):
+                    logo_html = _logo_html()
+                    if logo_html:
+                        gr.HTML(f'<div style="margin-bottom: 1rem;">{logo_html}</div>')
+                    gr.HTML('''
+                        <h1 class="apple-title">AutoAngioScore</h1>
+                        <p class="apple-subtitle">Автоматическая оценка степени коронарного поражения по видеозаписям ангиографии</p>
+                    ''')
+            # ==================== БЛОК ДОБАВЛЕНИЯ ИССЛЕДОВАНИЯ ====================
+            with gr.Group(elem_classes="apple-card add-study-card"):
+                with gr.Column(elem_classes="apple-card-header"):
+                    gr.HTML('<h3 class="apple-card-title">✨ Добавление нового исследования</h3>')
+                with gr.Column(elem_classes="apple-card-content"):
+                    # Информация об исследовании
+                    with gr.Row():
+                        study_name = gr.Textbox(
+                            label="Идентификатор исследования",
+                            placeholder="Например: INV-2024-001",
+                            elem_classes="apple-input",
+                            scale=1
+                        )
+                        study_desc = gr.Textbox(
+                            label="Описание (необязательно)",
+                            placeholder="Клинические данные, особенности...",
+                            elem_classes="apple-input",
+                            scale=1
+                        )
+                    # Загрузка DICOM - две колонки
+                    gr.HTML('<div class="upload-grid">')
+                    with gr.Column(elem_classes="apple-card", variant="panel"):
+                        with gr.Column(elem_classes="apple-card-header"):
+                            gr.HTML('<h3 class="apple-card-title" style="font-size: 1rem;">📄 Отдельные файлы</h3>')
+                        with gr.Column(elem_classes="apple-card-content"):
+                            files_all = gr.File(
+                                label="Выберите DICOM файлы",
+                                file_count="multiple",
+                                elem_classes="apple-input"
+                            )
+                            gr.HTML('''
+                                <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem;">
+                                    ✓ Поддерживаются файлы .dcm
+                                </div>
+                            ''')
+                    with gr.Column(elem_classes="apple-card", variant="panel"):
+                        with gr.Column(elem_classes="apple-card-header"):
+                            gr.HTML('<h3 class="apple-card-title" style="font-size: 1rem;">📁 Папка с исследованием</h3>')
+                        with gr.Column(elem_classes="apple-card-content"):
+                            files_folder = gr.File(
+                                label="Выберите папку",
+                                file_count="directory",
+                                elem_classes="apple-input"
+                            )
+                            gr.HTML('''
+                                <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem;">
+                                    ✓ Выберите папку, содержащую DICOM файлы
+                                </div>
+                            ''')
+                    gr.HTML('</div>')
+                    # Кнопки управления добавлением
+                    with gr.Row():
+                        btn_add = gr.Button(
+                            "✨ Добавить в очередь",
+                            elem_classes="apple-button-add",
+                            scale=1
+                        )
+                        btn_clear = gr.Button(
+                            "🗑️ Очистить форму",
+                            elem_classes="apple-button-clear",
+                            scale=1
+                        )
+                    # Краткая инструкция
+                    gr.HTML('''
+                        <div class="instruction-box">
+                            <div class="instruction-title">
+                                <span>🎯</span> Быстрый старт
+                            </div>
+                            <ul class="instruction-list">
+                                <li>📝 1. Укажите ID исследования</li>
+                                <li>📂 2. Загрузите DICOM файлы</li>
+                                <li>➕ 3. Добавьте в очередь</li>
+                                <li>🚀 4. Запустите анализ</li>
+                            </ul>
+                        </div>
+                    ''')
+            # ==================== ОЧЕРЕДЬ ИССЛЕДОВАНИЙ ====================
+            with gr.Group(elem_classes="apple-card"):
+                with gr.Column(elem_classes="apple-card-header"):
+                    gr.HTML('<h3 class="apple-card-title">📋 Очередь исследований</h3>')
+                with gr.Column(elem_classes="apple-card-content"):
+                    queue_table = gr.Dataframe(
+                        headers=["Исследование", "Описание", "Файлов", "Статус"],
+                        datatype=["str", "str", "number", "html"],
+                        interactive=False,
+                        elem_classes="apple-table",
+                        row_count=(0, "dynamic"),
+                        wrap=True
+                    )
+                    gr.HTML('''
+                        <div style="font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.75rem; text-align: center;">
+                            💡 Добавьте исследования в очередь для пакетного анализа
+                        </div>
+                    ''')
+            # ==================== ЗАПУСК АНАЛИЗА ====================
+            with gr.Row():
+                run_btn = gr.Button(
+                    "🚀 Запустить анализ очереди",
+                    elem_classes="apple-button"
+                )
+            # ==================== РЕЗУЛЬТАТЫ ====================
+            with gr.Group(elem_classes="apple-card"):
+                with gr.Column(elem_classes="apple-card-header"):
+                    gr.HTML('<h3 class="apple-card-title">📊 Результаты анализа</h3>')
+                with gr.Column(elem_classes="apple-card-content"):
+                    out_summary = gr.HTML(label="")
+                    out_json = gr.JSON(label="Подробные данные", visible=False)
+                    with gr.Row():
+                        out_report = gr.File(
+                            label="📥 Скачать отчет JSON",
+                            interactive=False,
+                            elem_classes="apple-input"
+                        )
+            # Footer
+            gr.HTML('''
+                <div style="margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.7);">
+                    <p>⚠️ Для исследовательских целей. Не является медицинским устройством.</p>
+                    <p>© 2024 AutoAngioScore | Инновационная оценка коронарного поражения</p>
+                </div>
+            ''')
+        # ==================== ЛОГИКА ====================
+        studies_state = gr.State([])
+        def _add_study_fn(studies: List[Dict[str, Any]], name: str, desc: str, files, folder):
+            name = (name or "").strip() or f"Исследование_{len(studies)+1}"
             desc = (desc or "").strip()
             paths = _collect_input_paths(files, folder)
             if not paths:
                 table = _update_status_table(studies, "Queued")
                 return studies, table, name, desc, files, folder
+            new_study = {
+                "name": name,
+                "description": desc,
+                "files": paths
+            }
+            studies = studies + [new_study]
             table = _update_status_table(studies, "Queued")
             return studies, table, "", "", None, None
         btn_add.click(
             _add_study_fn,
             inputs=[studies_state, study_name, study_desc, files_all, files_folder],
+            outputs=[studies_state, queue_table, study_name, study_desc, files_all, files_folder]
         )
+        def _clear_form():
+            return "", "", None, None
+        btn_clear.click(_clear_form, inputs=None, outputs=[study_name, study_desc, files_all, files_folder])
         def _clear_all():
             return [], []
+        # Доба��ляем кнопку очистки очереди (скрытая функциональность)
+        with gr.Row(visible=False):
+            clear_queue = gr.Button("Очистить очередь")
+            clear_queue.click(_clear_all, inputs=None, outputs=[studies_state, queue_table])
         def _before_run(studies):
             return _update_status_table(studies, "Running")
         def _run_infer(studies):
+            study_objs = []
+            for s in (studies or []):
+                study_objs.append(Study(name=s["name"], description=s.get("description", ""), files=s["files"]))
             result = run_inference(study_objs)
             report_path = _build_report_file(result)
             return result, report_path
         def _after_run(studies, result, report_path):
             table = _update_status_table(studies, "Done")
             return _format_results_html(result), result, report_path, table
         run_btn.click(
             _before_run,
             inputs=[studies_state],
+            outputs=[queue_table]
         ).then(
             _run_infer,
             inputs=[studies_state],
+            outputs=[out_json, out_report]
         ).then(
             _after_run,
             inputs=[studies_state, out_json, out_report],
+            outputs=[out_summary, out_json, out_report, queue_table]
         )
     return demo
 if __name__ == "__main__":
     favicon = LOGO_PATH if (LOGO_PATH and os.path.exists(LOGO_PATH)) else None
+    demo = create_ui()
+    demo.launch(
+        favicon_path=favicon,
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        css=APPLE_STYLE_CSS
+    )