Prepare Stylo Studio for Hugging Face Docker Space deployment

.env.example

@@ -0,0 +1,5 @@
+OPENROUTER_API_KEY=your_openrouter_api_key_here
+OPENROUTER_ENDPOINT=https://openrouter.ai/api/v1/chat/completions
+OPENROUTER_SITE_URL=http://localhost:8000
+OPENROUTER_APP_NAME=summarizer-uncertainty-app
+SHOW_UNCERTAINTY=true

Dockerfile

@@ -0,0 +1,30 @@
+FROM node:20-alpine AS frontend-build
+
+WORKDIR /frontend
+
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+
+COPY frontend ./
+RUN npm run build
+
+FROM python:3.13-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    FRONTEND_DIST_DIR=/app/frontend_dist
+
+WORKDIR /app
+
+RUN pip install --no-cache-dir pipenv
+
+COPY Pipfile Pipfile.lock /app/
+RUN pipenv sync --system --deploy
+
+COPY backend /app/backend
+COPY --from=frontend-build /frontend/dist /app/frontend_dist
+
+EXPOSE 7860
+
+CMD ["uvicorn", "backend.main:backend", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,3 +1,12 @@
+---
+title: Stylo Studio
+emoji: 📝
+colorFrom: gray
+colorTo: blue
+sdk: docker
+app_port: 7860
+---
+
 # summarizer-uncertainty-app
 
 A web application for uncertainty-aware editorial rewriting.

backend/main.py

@@ -4,6 +4,7 @@ import logging
 import os
 import re
 from datetime import datetime, timezone
+from pathlib import Path
 from random import random
 from typing import Any
 from typing import Literal
@@ -12,6 +13,8 @@ import httpx
 from dotenv import load_dotenv
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 
 RewriteStyle = Literal["shorten", "professional", "informal"]
@@ -49,6 +52,7 @@ def _env_flag(name: str, default: bool) -> bool:
 
 
 SHOW_UNCERTAINTY = _env_flag("SHOW_UNCERTAINTY", True)
+FRONTEND_DIST_DIR = Path(os.getenv("FRONTEND_DIST_DIR", "frontend/dist"))
 
 
 class SummarizeRequest(BaseModel):
@@ -364,3 +368,20 @@ def submit_editorial_changes(payload: EditorialChangesRequest) -> EditorialChang
         response.received_at,
     )
     return response
+
+
+if FRONTEND_DIST_DIR.exists():
+    assets_dir = FRONTEND_DIST_DIR / "assets"
+    if assets_dir.exists():
+        backend.mount("/assets", StaticFiles(directory=assets_dir), name="assets")
+
+    @backend.get("/{full_path:path}", include_in_schema=False)
+    def serve_frontend(full_path: str) -> FileResponse:
+        """Serve bundled frontend files when running as a single container."""
+        if full_path.startswith("api"):
+            raise HTTPException(status_code=404, detail="Not found")
+
+        requested = FRONTEND_DIST_DIR / full_path
+        if full_path and requested.exists() and requested.is_file():
+            return FileResponse(requested)
+        return FileResponse(FRONTEND_DIST_DIR / "index.html")

frontend/src/App.jsx

@@ -268,12 +268,19 @@ export function App() {
               Click any sentence to edit it. High-uncertainty sentences are flagged automatically.
             </p>
           </div>
-          <aside className="foundation-badge">
-            <img src={hffLogo} alt="Human Feedback Foundation logo" className="foundation-logo" />
-            <div>
-              <p className="foundation-text">A project of the Human Feedback Foundation.</p>
-              <p className="foundation-text">We prototype open, human-centered futures for AI.</p>
-            </div>
+          <aside>
+            <a
+              className="foundation-badge"
+              href="https://humanfeedback.io"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <img src={hffLogo} alt="Human Feedback Foundation logo" className="foundation-logo" />
+              <div>
+                <p className="foundation-text">A project of the Human Feedback Foundation.</p>
+                <p className="foundation-text">We prototype open, human-centered futures for AI.</p>
+              </div>
+            </a>
           </aside>
         </header>
 

frontend/src/styles.css

@@ -86,10 +86,19 @@ body {
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 10px;
+  color: inherit;
+  cursor: pointer;
   display: flex;
   gap: 10px;
   max-width: 360px;
   padding: 8px;
+  text-decoration: none;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.foundation-badge:hover {
+  box-shadow: 0 10px 24px rgba(10, 18, 28, 0.1);
+  transform: translateY(-1px);
 }
 
 .foundation-logo {