flashstudio 0.0.1__py3-none-any.whl

flashstudio/components/styles.py

@@ -0,0 +1,346 @@
+"""FlashStudio — Professional CSS (readable, clean layout)."""
+
+import streamlit as st
+
+
+def inject_custom_css():
+    """Professional-grade CSS — clean, readable, well-spaced."""
+    st.markdown("""
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+    /* ═══════ GLOBAL — NO SCROLL ═══════ */
+    .stApp {
+        font-family: 'Inter', -apple-system, sans-serif;
+        overflow: hidden !important;
+        height: 100vh !important;
+    }
+
+    .main {
+        overflow: hidden !important;
+        height: 100vh !important;
+    }
+
+    .main .block-container {
+        padding: 0.8rem 1.5rem 0.5rem !important;
+        max-width: 1500px;
+        height: calc(100vh - 2rem) !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        scrollbar-width: thin;
+        scrollbar-color: #D1D5DB transparent;
+    }
+    .main .block-container::-webkit-scrollbar { width: 4px; }
+    .main .block-container::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
+
+    /* Allow internal scroll on specific containers */
+    .scrollable-panel {
+        overflow-y: auto !important;
+        scrollbar-width: thin;
+        scrollbar-color: #D1D5DB transparent;
+    }
+    .scrollable-panel::-webkit-scrollbar { width: 4px; }
+    .scrollable-panel::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
+
+    .main .stMarkdown { margin-bottom: 0 !important; }
+    .main .element-container { margin-bottom: 0.15rem !important; }
+    .main div[data-testid="stVerticalBlock"] > div { gap: 0.35rem !important; }
+    .main hr { margin: 0.3rem 0 !important; border-color: #E5E7EB !important; }
+
+    /* ═══════ SIDEBAR ═══════ */
+    section[data-testid="stSidebar"] {
+        background: #FAFBFC !important;
+        border-right: 1px solid #E5E7EB;
+        width: 210px !important;
+    }
+
+    section[data-testid="stSidebar"] > div {
+        width: 210px !important;
+        padding: 0.5rem 0.5rem !important;
+    }
+
+    section[data-testid="stSidebar"] hr {
+        border-color: #E5E7EB !important;
+        margin: 0.4rem 0 !important;
+    }
+
+    section[data-testid="stSidebar"] .stButton > button {
+        font-size: 0.92rem !important;
+        padding: 0.42rem 0.7rem !important;
+        border-radius: 6px !important;
+        text-align: left !important;
+        justify-content: flex-start !important;
+        min-height: 0 !important;
+        height: auto !important;
+        transition: all 0.15s ease;
+    }
+
+    section[data-testid="stSidebar"] .stButton > button[kind="secondary"] {
+        background: transparent !important;
+        border: none !important;
+        color: #4B5563 !important;
+    }
+
+    section[data-testid="stSidebar"] .stButton > button[kind="secondary"]:hover {
+        background: #EEF2FF !important;
+        color: #7C3AED !important;
+    }
+
+    section[data-testid="stSidebar"] .stButton > button[kind="primary"] {
+        background: #EEF2FF !important;
+        border: none !important;
+        color: #7C3AED !important;
+        font-weight: 600 !important;
+        border-left: 3px solid #7C3AED !important;
+        border-radius: 0 6px 6px 0 !important;
+    }
+
+    [data-testid="stSidebarNav"] { display: none !important; }
+
+    /* ═══════ METRIC CARDS ═══════ */
+    div[data-testid="stMetric"] {
+        background: #FFF;
+        border: 1px solid #E5E7EB;
+        border-radius: 8px;
+        padding: 0.6rem 0.8rem !important;
+    }
+
+    div[data-testid="stMetric"] label {
+        font-size: 0.82rem !important;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: #6B7280 !important;
+        font-weight: 600;
+        margin-bottom: 0.1rem !important;
+    }
+
+    div[data-testid="stMetric"] div[data-testid="stMetricValue"] {
+        font-size: 1.25rem !important;
+        font-weight: 700;
+        color: #1A1A2E !important;
+        line-height: 1.3;
+    }
+
+    /* ═══════ BUTTONS ═══════ */
+    .main .stButton > button {
+        font-size: 0.92rem !important;
+        padding: 0.35rem 0.7rem !important;
+        min-height: 0 !important;
+        border-radius: 6px;
+        transition: all 0.15s ease;
+    }
+
+    .main .stButton > button[kind="primary"] {
+        background: #7C3AED !important;
+        border: none;
+        font-weight: 600;
+        color: #FFF !important;
+    }
+
+    .main .stButton > button[kind="primary"]:hover {
+        background: #6D28D9 !important;
+        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
+    }
+
+    .main .stButton > button[kind="secondary"] {
+        border: 1px solid #E5E7EB !important;
+        color: #374151 !important;
+    }
+
+    /* ═══════ CONTAINERS ═══════ */
+    div[data-testid="stVerticalBlockBorderWrapper"] {
+        border-radius: 8px !important;
+        border-color: #E5E7EB !important;
+    }
+
+    div[data-testid="stExpander"] {
+        border-radius: 8px !important;
+        border: 1px solid #E5E7EB !important;
+    }
+
+    /* ═══════ TABS ═══════ */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 0.4rem;
+        border-bottom: 1px solid #E5E7EB;
+    }
+
+    .stTabs [data-baseweb="tab"] {
+        font-weight: 500;
+        font-size: 0.95rem;
+        color: #6B7280;
+        padding: 0.45rem 0.8rem;
+    }
+
+    .stTabs [aria-selected="true"] {
+        color: #7C3AED !important;
+        font-weight: 600;
+        border-bottom: 2px solid #7C3AED !important;
+    }
+
+    /* Tab content area: constrain height to prevent page scroll */
+    .stTabs [data-baseweb="tab-panel"] {
+        max-height: calc(100vh - 12rem) !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        scrollbar-width: thin;
+        scrollbar-color: #D1D5DB transparent;
+    }
+    .stTabs [data-baseweb="tab-panel"]::-webkit-scrollbar { width: 4px; }
+    .stTabs [data-baseweb="tab-panel"]::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
+
+    /* ═══════ FORM INPUTS ═══════ */
+    .main .stSelectbox > div > div,
+    .main .stTextInput > div > div > input,
+    .main .stNumberInput > div > div > input {
+        font-size: 0.92rem !important;
+        padding: 0.32rem 0.5rem !important;
+        border-radius: 6px;
+    }
+
+    .main .stSelectbox label,
+    .main .stTextInput label,
+    .main .stNumberInput label,
+    .main .stSlider label,
+    .main .stCheckbox label,
+    .main .stRadio label,
+    .main .stFileUploader label,
+    .main .stTextArea label {
+        font-size: 0.92rem !important;
+        margin-bottom: 0 !important;
+    }
+
+    .main .stCheckbox { margin-bottom: 0 !important; }
+    .main .stSlider > div { padding-top: 0 !important; }
+    .stSlider > div > div > div > div { background: #7C3AED !important; }
+
+    /* ═══════ HEADINGS ═══════ */
+    .main h1 { font-size: 1.5rem !important; margin: 0.15rem 0 !important; font-weight: 700; }
+    .main h2 { font-size: 1.25rem !important; margin: 0.15rem 0 !important; font-weight: 600; }
+    .main h3 { font-size: 1.1rem !important; margin: 0.1rem 0 !important; font-weight: 600; color: #1A1A2E; }
+    .main h4 { font-size: 1.0rem !important; margin: 0.1rem 0 !important; font-weight: 600; color: #374151; }
+
+    /* ═══════ EXPANDER ═══════ */
+    .streamlit-expanderHeader {
+        font-weight: 600;
+        font-size: 0.92rem;
+        padding: 0.3rem 0.5rem !important;
+    }
+
+    /* ═══════ STEP INDICATOR ═══════ */
+    .step-indicator {
+        display: flex;
+        justify-content: center;
+        gap: 0.1rem;
+        padding: 0.25rem 0;
+        margin-bottom: 0.3rem;
+    }
+
+    .step-item { text-align: center; flex: 1; }
+    .step-icon { font-size: 1.15rem; display: block; }
+    .step-label { font-size: 0.85rem; font-weight: 500; color: #6B7280; }
+    .step-bar { height: 2px; border-radius: 1px; margin-top: 0.15rem; }
+    .step-active .step-label { color: #7C3AED; font-weight: 700; }
+    .step-active .step-bar { background: #7C3AED; }
+    .step-done .step-bar { background: #10B981; }
+    .step-pending .step-bar { background: #E5E7EB; }
+    .step-pending .step-label { opacity: 0.65; }
+
+    /* ═══════ PIPELINE ═══════ */
+    .pipeline-steps {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.15rem;
+        padding: 0.25rem 0;
+        margin-bottom: 0.2rem;
+    }
+
+    .pipeline-step {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.2rem;
+        padding: 0.15rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.85rem;
+        font-weight: 500;
+    }
+
+    .pipeline-arrow { color: #D1D5DB; font-size: 0.75rem; }
+    .ps-done { background: #ECFDF5; color: #065F46; }
+    .ps-active { background: #FEF3C7; color: #92400E; }
+    .ps-pending { background: #F9FAFB; color: #9CA3AF; }
+
+    /* ═══════ INFO BAR ═══════ */
+    .info-bar {
+        background: #F8F7FF;
+        border: 1px solid #EDE9FE;
+        border-radius: 6px;
+        padding: 0.35rem 0.8rem;
+        text-align: center;
+        font-size: 0.88rem;
+        color: #6B21A8;
+    }
+    .info-bar b { color: #1A1A2E; }
+
+    /* ═══════ STAT ROW ═══════ */
+    .ds-card-stats {
+        display: flex;
+        gap: 0.6rem;
+        font-size: 0.88rem;
+        color: #6B7280;
+        flex-wrap: wrap;
+        line-height: 1.4;
+    }
+    .ds-card-stats span { white-space: nowrap; }
+
+    /* ═══════ ALERTS ═══════ */
+    .stAlert { padding: 0.35rem 0.6rem !important; font-size: 0.92rem !important; }
+
+    /* ═══════ CAPTION ═══════ */
+    .main .stCaption, .main small { font-size: 0.82rem !important; }
+
+    /* ═══════ PROGRESS ═══════ */
+    .stProgress > div > div {
+        background: linear-gradient(90deg, #7C3AED, #A78BFA) !important;
+        border-radius: 3px;
+    }
+
+    /* ═══════ FILE UPLOADER ═══════ */
+    [data-testid="stFileUploader"] section {
+        border-radius: 6px;
+        border: 2px dashed #D1D5DB !important;
+        padding: 0.6rem !important;
+    }
+    [data-testid="stFileUploader"] section:hover { border-color: #7C3AED !important; }
+
+    /* ═══════ DATAFRAME ═══════ */
+    .stDataFrame { border-radius: 6px; border: 1px solid #E5E7EB; }
+
+    /* ═══════ DOWNLOAD ═══════ */
+    .stDownloadButton > button {
+        border-radius: 6px;
+        font-size: 0.92rem !important;
+        padding: 0.35rem 0.7rem !important;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+
+def render_info_bar(items: dict):
+    inner = " · ".join(f"{k}: <b>{v}</b>" for k, v in items.items())
+    st.markdown(f'<div class="info-bar">{inner}</div>', unsafe_allow_html=True)
+
+
+def render_page_header(icon: str, title: str, subtitle: str = ""):
+    icon_html = f'<span style="margin-right:0.4rem;">{icon}</span>' if icon else ""
+    subtitle_html = (
+        f'<div style="font-size:0.88rem;color:#6B7280;margin-top:0.1rem;">{subtitle}</div>'
+        if subtitle else ""
+    )
+    st.markdown(
+        f'<div style="margin-bottom:0.4rem;">'
+        f'<h1 style="display:inline;color:#1A1A2E;">{icon_html}{title}</h1>'
+        f'{subtitle_html}'
+        f'</div>',
+        unsafe_allow_html=True,
+    )

flashstudio/components/wizard.py

@@ -0,0 +1,45 @@
+"""Step indicator and page navigation buttons."""
+
+import streamlit as st
+
+
+def render_step_indicator(steps: list, current_step: int):
+    """Thin horizontal step indicator bar."""
+    items = ""
+    for i, step in enumerate(steps):
+        cls = "step-done" if i < current_step else ("step-active" if i == current_step else "step-pending")
+        icon = step["icon"]
+        items += (
+            f'<div class="step-item {cls}">'
+            f'<span class="step-icon">{icon}</span>'
+            f'<div class="step-label">{step["label"]}</div>'
+            f'<div class="step-bar"></div></div>'
+        )
+    st.markdown(f'<div class="step-indicator">{items}</div>', unsafe_allow_html=True)
+
+
+def render_navigation(steps: list, current_step: int):
+    """Previous / Next navigation buttons at the bottom of each page."""
+    total = len(steps)
+    if total <= 1:
+        return
+
+    st.markdown("<div style='height:1.5rem;'></div>", unsafe_allow_html=True)
+
+    is_first = current_step <= 0
+    is_last = current_step >= total - 1
+
+    prev_label = f"Previous: {steps[current_step - 1]['label']}" if not is_first else ""
+    next_label = f"Next: {steps[current_step + 1]['label']}" if not is_last else ""
+
+    col_prev, col_spacer, col_next = st.columns([1, 3, 1])
+    with col_prev:
+        if not is_first:
+            if st.button(prev_label, key="nav_prev", use_container_width=True):
+                st.session_state["current_step"] = current_step - 1
+                st.rerun()
+    with col_next:
+        if not is_last:
+            if st.button(next_label, key="nav_next", type="primary", use_container_width=True):
+                st.session_state["current_step"] = current_step + 1
+                st.rerun()

flashstudio/components/zone_drawer/__init__.py

@@ -0,0 +1,177 @@
+"""Zone drawing component using streamlit-drawable-canvas for bi-directional data."""
+
+import json
+import io
+import numpy as np
+import streamlit as st
+from PIL import Image
+
+try:
+    # Patch for streamlit-drawable-canvas 0.9.x + Streamlit 1.30+
+    # st.elements.image.image_to_url was removed; provide a shim
+    import streamlit.elements.image as _img_mod
+    if not hasattr(_img_mod, "image_to_url"):
+        def _image_to_url(image, width, clamp, channels, output_format, image_id, allow_emoji=True):
+            """Compatibility shim for removed image_to_url."""
+            import base64
+            buf = io.BytesIO()
+            if isinstance(image, Image.Image):
+                image.save(buf, format="PNG")
+            elif isinstance(image, np.ndarray):
+                Image.fromarray(image).save(buf, format="PNG")
+            else:
+                return ""
+            b64 = base64.b64encode(buf.getvalue()).decode()
+            return f"data:image/png;base64,{b64}"
+        _img_mod.image_to_url = _image_to_url
+
+    from streamlit_drawable_canvas import st_canvas
+    _HAS_CANVAS = True
+except (ImportError, Exception):
+    _HAS_CANVAS = False
+
+
+def zone_drawer(
+    image: Image.Image | None = None,
+    mode: str = "polygon",
+    points: list | None = None,
+    closed: bool = False,
+    display_width: int = 700,
+    key: str | None = None,
+) -> dict | None:
+    if not _HAS_CANVAS:
+        st.warning("Install `streamlit-drawable-canvas` for interactive drawing.")
+        return None
+
+    _MODE_MAP = {"polygon": "polygon", "rect": "rect", "line": "line"}
+    canvas_mode = _MODE_MAP.get(mode, "polygon")
+
+    if image is not None:
+        aspect = image.height / image.width
+        display_height = int(display_width * aspect)
+        bg = image.resize((display_width, display_height))
+    else:
+        display_height = int(display_width * 0.6)
+        bg = Image.new("RGB", (display_width, display_height), (26, 26, 46))
+
+    initial_drawing = None
+    if points and len(points) >= 2:
+        if image:
+            sx = display_width / image.width
+            sy = display_height / image.height
+        else:
+            sx = sy = 1.0
+        scaled = [[p[0] * sx, p[1] * sy] for p in points]
+        initial_drawing = _build_initial_drawing(scaled, mode, closed, display_width, display_height)
+
+    canvas_result = st_canvas(
+        fill_color="rgba(124, 58, 237, 0.15)",
+        stroke_width=3,
+        stroke_color="#7C3AED",
+        background_image=bg,
+        drawing_mode=canvas_mode,
+        point_display_radius=0,
+        width=display_width,
+        height=display_height,
+        key=key or "zone_canvas",
+        initial_drawing=initial_drawing,
+    )
+
+    if canvas_result is None or canvas_result.json_data is None:
+        return None
+
+    objects = canvas_result.json_data.get("objects", [])
+    if not objects:
+        return None
+
+    extracted_points = []
+    if image:
+        sx = image.width / display_width
+        sy = image.height / display_height
+    else:
+        sx = sy = 1.0
+
+    for obj in objects:
+        obj_type = obj.get("type", "")
+        left = obj.get("left", 0)
+        top = obj.get("top", 0)
+
+        if obj_type == "rect":
+            w = obj.get("width", 0) * obj.get("scaleX", 1)
+            h = obj.get("height", 0) * obj.get("scaleY", 1)
+            extracted_points = [
+                [int((left) * sx), int((top) * sy)],
+                [int((left + w) * sx), int((top) * sy)],
+                [int((left + w) * sx), int((top + h) * sy)],
+                [int((left) * sx), int((top + h) * sy)],
+            ]
+        elif obj_type == "line":
+            x1 = obj.get("x1", 0) + left
+            y1 = obj.get("y1", 0) + top
+            x2 = obj.get("x2", 0) + left
+            y2 = obj.get("y2", 0) + top
+            extracted_points = [
+                [int(x1 * sx), int(y1 * sy)],
+                [int(x2 * sx), int(y2 * sy)],
+            ]
+        elif obj_type == "polygon" or obj_type == "path":
+            path = obj.get("path", [])
+            for cmd in path:
+                if len(cmd) >= 3 and cmd[0] in ("M", "L"):
+                    extracted_points.append([int((cmd[1] + left) * sx), int((cmd[2] + top) * sy)])
+
+    if not extracted_points:
+        return None
+
+    return {
+        "points": extracted_points,
+        "closed": closed or mode in ("rect", "polygon"),
+        "mode": mode,
+        "displayWidth": display_width,
+        "displayHeight": display_height,
+    }
+
+
+def _build_initial_drawing(points, mode, closed, dw, dh):
+    objects = []
+    if mode == "rect" and len(points) >= 2:
+        x1, y1 = points[0]
+        x2, y2 = points[-1]
+        objects.append({
+            "type": "rect",
+            "left": min(x1, x2),
+            "top": min(y1, y2),
+            "width": abs(x2 - x1),
+            "height": abs(y2 - y1),
+            "fill": "rgba(124, 58, 237, 0.15)",
+            "stroke": "#7C3AED",
+            "strokeWidth": 3,
+        })
+    elif mode == "line" and len(points) >= 2:
+        objects.append({
+            "type": "line",
+            "x1": points[0][0],
+            "y1": points[0][1],
+            "x2": points[1][0],
+            "y2": points[1][1],
+            "left": 0,
+            "top": 0,
+            "stroke": "#7C3AED",
+            "strokeWidth": 3,
+        })
+    elif len(points) >= 3:
+        path = [["M", points[0][0], points[0][1]]]
+        for p in points[1:]:
+            path.append(["L", p[0], p[1]])
+        if closed:
+            path.append(["L", points[0][0], points[0][1]])
+        objects.append({
+            "type": "path",
+            "path": path,
+            "left": 0,
+            "top": 0,
+            "fill": "rgba(124, 58, 237, 0.15)" if closed else "transparent",
+            "stroke": "#7C3AED",
+            "strokeWidth": 3,
+        })
+    return {"version": "5.3.0", "objects": objects}