Update app.py

app.py

@@ -4,7 +4,6 @@ import anthropic
 from pypdf import PdfReader
 
 # ── Anthropic client ──────────────────────────────────────────────────────────
-# Set ANTHROPIC_API_KEY in your HuggingFace Space → Settings → Repository secrets
 client = anthropic.Anthropic(api_key=os.environ.get("ANTHROPIC_API_KEY"))
 
 SYSTEM_PROMPT = """You are an expert problem analyst and innovation coach helping interns understand real-world problems and brainstorm creative solutions.
@@ -21,7 +20,7 @@ When given a transcription or document, you will:
    - Identify underlying causes (technical, organizational, process-related)
 
 3. **BRAINSTORMING IDEAS**
-   - Generate 5–8 diverse, creative solution directions
+   - Generate 5-8 diverse, creative solution directions
    - Include both quick wins and long-term strategic ideas
    - Think across technology, process, and people dimensions
 
@@ -32,7 +31,6 @@ Keep your tone encouraging, clear, and structured. Use headers and bullet points
 
 
 def extract_text_from_pdf(pdf_file) -> str:
-    """Extract all text from an uploaded PDF file."""
     reader = PdfReader(pdf_file)
     pages_text = []
     for page in reader.pages:
@@ -43,11 +41,6 @@ def extract_text_from_pdf(pdf_file) -> str:
 
 
 def run_agent(text_input: str, pdf_file, progress=gr.Progress()):
-    """
-    Core agent function.
-    Accepts either pasted text or a PDF upload, then streams the analysis.
-    """
-    # ── Determine input source ────────────────────────────────────────────────
     content = ""
 
     if pdf_file is not None:
@@ -55,24 +48,23 @@ def run_agent(text_input: str, pdf_file, progress=gr.Progress()):
         try:
             content = extract_text_from_pdf(pdf_file)
             if not content.strip():
-                yield "⚠️ Could not extract text from this PDF. It may be scanned/image-based. Please paste the text manually."
+                yield "Could not extract text from this PDF. It may be scanned or image-based. Please paste the text manually."
                 return
         except Exception as e:
-            yield f"⚠️ Error reading PDF: {str(e)}"
+            yield f"Error reading PDF: {str(e)}"
             return
 
     elif text_input and text_input.strip():
         content = text_input.strip()
 
     else:
-        yield "⚠️ Please paste a transcription or upload a PDF file to get started."
+        yield "Please paste a transcription or upload a PDF file to get started."
         return
 
     if len(content) < 50:
-        yield "⚠️ The input seems too short. Please provide more context for a meaningful analysis."
+        yield "The input seems too short. Please provide more context for a meaningful analysis."
         return
 
-    # ── Truncate very long inputs to stay within token limits ─────────────────
     MAX_CHARS = 12000
     if len(content) > MAX_CHARS:
         content = content[:MAX_CHARS] + "\n\n[... content truncated for length ...]"
@@ -87,11 +79,10 @@ def run_agent(text_input: str, pdf_file, progress=gr.Progress()):
 
 Please provide a full problem analysis and brainstorming session based on this content."""
 
-    # ── Stream from Anthropic API ─────────────────────────────────────────────
     output = ""
     try:
         with client.messages.stream(
-            model="claude-sonnet-4-20250514",
+            model="claude-sonnet-4-6",
             max_tokens=2048,
             system=SYSTEM_PROMPT,
             messages=[{"role": "user", "content": user_message}],
@@ -102,99 +93,306 @@ Please provide a full problem analysis and brainstorming session based on this c
                 yield output
 
     except anthropic.AuthenticationError:
-        yield "⚠️ Invalid API key. Please set your ANTHROPIC_API_KEY in the Space secrets."
+        yield "Invalid API key. Please set your ANTHROPIC_API_KEY in the Space secrets."
     except anthropic.RateLimitError:
-        yield "⚠️ Rate limit hit. Please wait a moment and try again."
+        yield "Rate limit reached. Please wait a moment and try again."
     except Exception as e:
-        yield f"⚠️ Unexpected error: {str(e)}"
-
+        yield f"Unexpected error: {str(e)}"
+
+
+# ── Custom CSS ────────────────────────────────────────────────────────────────
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+* {
+    font-family: 'Sora', sans-serif !important;
+}
+
+body, .gradio-container {
+    background-color: #0d1117 !important;
+    color: #e2e8f0 !important;
+}
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+
+/* Header */
+#app-header {
+    padding: 2.5rem 0 1.5rem;
+    border-bottom: 1px solid #1e2d3d;
+    margin-bottom: 2rem;
+}
+
+#app-header h1 {
+    font-size: 1.6rem;
+    font-weight: 600;
+    color: #e2e8f0;
+    letter-spacing: -0.02em;
+    margin: 0 0 0.3rem 0;
+}
+
+#app-header p {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin: 0;
+    font-weight: 300;
+}
+
+/* Accent bar */
+#accent-bar {
+    width: 2.5rem;
+    height: 2px;
+    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
+    margin-bottom: 0.75rem;
+    border-radius: 2px;
+}
+
+/* Section labels */
+.section-label {
+    font-size: 0.7rem !important;
+    font-weight: 500 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.12em !important;
+    color: #475569 !important;
+    margin-bottom: 0.75rem !important;
+}
+
+/* Input panels */
+.input-panel, .output-panel {
+    background: #111827 !important;
+    border: 1px solid #1e2d3d !important;
+    border-radius: 8px !important;
+    padding: 1.25rem !important;
+}
+
+/* Textbox */
+textarea, .gr-textbox textarea {
+    background: #0d1117 !important;
+    border: 1px solid #1e2d3d !important;
+    border-radius: 6px !important;
+    color: #cbd5e1 !important;
+    font-size: 0.875rem !important;
+    line-height: 1.7 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    padding: 0.875rem !important;
+    resize: vertical !important;
+}
+
+textarea:focus {
+    border-color: #0ea5e9 !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
+}
+
+textarea::placeholder {
+    color: #334155 !important;
+}
+
+/* File upload */
+.gr-file, .upload-button {
+    background: #0d1117 !important;
+    border: 1px dashed #1e2d3d !important;
+    border-radius: 6px !important;
+    color: #64748b !important;
+}
+
+/* Tabs */
+.tab-nav {
+    border-bottom: 1px solid #1e2d3d !important;
+    margin-bottom: 1rem !important;
+}
+
+.tab-nav button {
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    color: #475569 !important;
+    border: none !important;
+    background: transparent !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 0 !important;
+    letter-spacing: 0.02em !important;
+}
+
+.tab-nav button.selected {
+    color: #0ea5e9 !important;
+    border-bottom: 2px solid #0ea5e9 !important;
+}
+
+/* Run button */
+#run-btn {
+    background: #0ea5e9 !important;
+    color: #0d1117 !important;
+    border: none !important;
+    border-radius: 6px !important;
+    font-size: 0.875rem !important;
+    font-weight: 600 !important;
+    padding: 0.7rem 1.75rem !important;
+    letter-spacing: 0.01em !important;
+    transition: background 0.15s ease !important;
+    margin-top: 0.75rem !important;
+    width: 100% !important;
+}
+
+#run-btn:hover {
+    background: #38bdf8 !important;
+}
+
+/* Output markdown */
+#output-area {
+    background: #0d1117 !important;
+    border: 1px solid #1e2d3d !important;
+    border-radius: 6px !important;
+    padding: 1.25rem !important;
+    min-height: 400px !important;
+    font-size: 0.875rem !important;
+    line-height: 1.8 !important;
+    color: #cbd5e1 !important;
+}
+
+#output-area h1, #output-area h2, #output-area h3 {
+    color: #e2e8f0 !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    margin-top: 1.25rem !important;
+}
+
+#output-area strong {
+    color: #0ea5e9 !important;
+    font-weight: 500 !important;
+}
+
+#output-area ul, #output-area ol {
+    padding-left: 1.25rem !important;
+    color: #94a3b8 !important;
+}
+
+#output-area code {
+    background: #1e2d3d !important;
+    border-radius: 3px !important;
+    padding: 0.1em 0.35em !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.82em !important;
+    color: #38bdf8 !important;
+}
+
+/* Accordion */
+.gr-accordion {
+    background: #111827 !important;
+    border: 1px solid #1e2d3d !important;
+    border-radius: 6px !important;
+    margin-top: 0.75rem !important;
+}
+
+.gr-accordion .label-wrap {
+    font-size: 0.8rem !important;
+    color: #475569 !important;
+    font-weight: 500 !important;
+}
+
+/* Examples */
+.gr-examples {
+    margin-top: 1.5rem !important;
+}
+
+.gr-examples table {
+    background: #111827 !important;
+    border: 1px solid #1e2d3d !important;
+    border-radius: 6px !important;
+}
+
+.gr-examples td {
+    color: #64748b !important;
+    font-size: 0.8rem !important;
+}
+
+/* Divider */
+.divider {
+    border: none !important;
+    border-top: 1px solid #1e2d3d !important;
+    margin: 1.5rem 0 !important;
+}
+
+/* Labels */
+label, .gr-label {
+    color: #475569 !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.03em !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: #0d1117; }
+::-webkit-scrollbar-thumb { background: #1e2d3d; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }
+"""
 
 # ── Gradio UI ─────────────────────────────────────────────────────────────────
 with gr.Blocks(
-    title="Intern Problem Brainstormer",
-    theme=gr.themes.Soft(
-        primary_hue="violet",
-        secondary_hue="slate",
-        font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
-    ),
-    css="""
-        #header { text-align: center; padding: 1.5rem 0 0.5rem; }
-        #header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; }
-        #header p { color: #6b7280; font-size: 0.95rem; }
-        .input-box textarea { font-size: 14px !important; line-height: 1.6 !important; }
-        #run-btn { font-size: 1rem !important; padding: 0.65rem 2rem !important; }
-        #output-box { font-size: 14px; line-height: 1.75; }
-        .gr-tab-item { font-weight: 500; }
-    """,
+    title="Problem Brainstormer",
+    css=custom_css,
 ) as demo:
 
-    # Header
     gr.HTML("""
-        <div id="header">
-            <h1>🧠 Intern Problem Brainstormer</h1>
-            <p>Paste a meeting transcription or upload a PDF — get instant problem analysis & brainstormed solutions.</p>
+        <div id="app-header">
+            <div id="accent-bar"></div>
+            <h1>Problem Brainstormer</h1>
+            <p>Paste a meeting transcript or upload a document to get structured problem analysis and solution ideas.</p>
         </div>
     """)
 
-    gr.Markdown("---")
-
     with gr.Row(equal_height=False):
-        # ── Left column: Input ────────────────────────────────────────────────
-        with gr.Column(scale=1):
-            gr.Markdown("### 📥 Input")
+        with gr.Column(scale=1, elem_classes=["input-panel"]):
+            gr.HTML('<p class="section-label">Input</p>')
 
             with gr.Tabs():
-                with gr.Tab("📝 Paste Text"):
+                with gr.Tab("Paste Text"):
                     text_input = gr.Textbox(
-                        label="Transcription or problem description",
-                        placeholder="Paste your meeting notes, transcription, or problem statement here...",
-                        lines=14,
-                        max_lines=30,
-                        elem_classes=["input-box"],
+                        label="",
+                        placeholder="Paste your meeting notes, transcript, or problem description here...",
+                        lines=16,
+                        max_lines=32,
                     )
 
-                with gr.Tab("📄 Upload PDF"):
+                with gr.Tab("Upload PDF"):
                     pdf_input = gr.File(
-                        label="Upload a PDF document",
+                        label="",
                         file_types=[".pdf"],
                         file_count="single",
                     )
-                    gr.Markdown(
-                        "<small style='color:#6b7280'>Text-based PDFs only. Scanned PDFs won't work.</small>"
-                    )
+                    gr.HTML('<p style="font-size:0.75rem;color:#334155;margin-top:0.5rem">Text-based PDFs only. Scanned documents are not supported.</p>')
 
             run_btn = gr.Button(
-                "⚡ Analyse & Brainstorm",
+                "Analyze and Brainstorm",
                 variant="primary",
                 elem_id="run-btn",
             )
 
-            with gr.Accordion("ℹ️ How to use", open=False):
+            with gr.Accordion("How to use", open=False):
                 gr.Markdown("""
-**Option 1 – Paste Text**
-Copy-paste any transcription, meeting notes, or problem description into the text box.
+**Paste Text** — Copy any transcript, meeting notes, or problem statement into the text field.
 
-**Option 2 – Upload PDF**
-Upload a text-based PDF (e.g. a research doc, spec, or report).
+**Upload PDF** — Upload a text-based PDF such as a spec, report, or research document.
 
-**Then click ⚡ Analyse & Brainstorm** to get:
+**Click Analyze** to receive:
 - A clear articulation of the core problem
-- Root cause analysis
-- 5–8 creative brainstormed ideas
-- Concrete next steps for you as an intern
+- Root cause breakdown
+- 5–8 creative solution directions
+- Concrete next steps you can take as an intern
                 """)
 
-        # ── Right column: Output ──────────────────────────────────────────────
-        with gr.Column(scale=1):
-            gr.Markdown("### 💡 Analysis & Ideas")
+        with gr.Column(scale=1, elem_classes=["output-panel"]):
+            gr.HTML('<p class="section-label">Analysis</p>')
             output = gr.Markdown(
-                value="*Your analysis will appear here...*",
-                elem_id="output-box",
+                value="*Your analysis will appear here once you submit.*",
+                elem_id="output-area",
             )
 
-    # ── Examples ──────────────────────────────────────────────────────────────
-    gr.Markdown("---")
-    gr.Markdown("### 🧪 Try an example")
+    gr.HTML('<hr class="divider">')
+    gr.HTML('<p class="section-label">Example Inputs</p>')
+
     gr.Examples(
         examples=[
             [
@@ -207,10 +405,9 @@ Upload a text-based PDF (e.g. a research doc, spec, or report).
             ],
         ],
         inputs=[text_input, pdf_input],
-        label="Click an example to load it, then hit Analyse & Brainstorm",
+        label="",
     )
 
-    # ── Wire up ───────────────────────────────────────────────────────────────
     run_btn.click(
         fn=run_agent,
         inputs=[text_input, pdf_input],
@@ -218,7 +415,6 @@ Upload a text-based PDF (e.g. a research doc, spec, or report).
         show_progress="full",
     )
 
-    # Also allow Ctrl+Enter from the text box
     text_input.submit(
         fn=run_agent,
         inputs=[text_input, pdf_input],