Restyle app with elluminate design system

- Remove text input field, PDF-only mode
- Set default language to German
- Light theme with cream background and purple accents
- Clean, minimal UI without emojis
- Improved responsive design
- Add .gitignore for styling reference files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,2 @@
+# Ignore styling reference files
+styling_files_elluminate/

app.py

@@ -360,72 +360,67 @@ def format_output(summary: str, structure: str) -> str:
     """Format the summary with thinking section if available."""
     if not summary and not structure:
         return "*Your summary will appear here...*"
-    
+
     parts = []
-    
+
     if structure:
-        parts.append(f'<div class="thinking-section">\n\n💭 **Thinking**\n\n*{structure}*\n\n</div>')
-    
+        parts.append(f'<div class="thinking-section">\n\n**Reasoning**\n\n*{structure}*\n\n</div>')
+
     if summary:
         if structure:
             parts.append('<div class="summary-divider"></div>')
         parts.append(f'<div class="summary-section">\n\n{summary}\n\n</div>')
-    
+
     return "\n".join(parts)
 
 
 def summarize(
     pdf_file: str | None,
-    text_input: str | None,
     language: str,
     words: int,
     custom_instruction: str,
     progress=gr.Progress(),
 ):
     """Main entry point for summarization."""
-    page_ranges = None
-    lang_code = LANGUAGES.get(language, "en")
-    
-    # Determine input source
-    if pdf_file:
-        progress(0.1, desc="📄 Extracting text from PDF...")
-        try:
-            text, page_ranges = extract_pdf_text(pdf_file)
-        except Exception as e:
-            yield (
-                f"❌ **Error extracting PDF:** {str(e)}",
-                "Please check that MISTRAL_API_KEY is set correctly.",
-                gr.update(visible=False),
-            )
-            return
-    elif text_input and text_input.strip():
-        text = text_input.strip()
-    else:
+    lang_code = LANGUAGES.get(language, "de")
+
+    if not pdf_file:
         yield (
-            "⚠️ Please provide a PDF file or paste some text to summarize.",
+            "Please upload a PDF document to summarize.",
             "",
             gr.update(visible=False),
         )
         return
-    
+
+    progress(0.1, desc="Extracting text from PDF...")
+    try:
+        text, page_ranges = extract_pdf_text(pdf_file)
+    except Exception as e:
+        yield (
+            f"**Error extracting PDF:** {str(e)}",
+            "Please check that MISTRAL_API_KEY is set correctly.",
+            gr.update(visible=False),
+        )
+        return
+
     if not text.strip():
         yield (
-            "⚠️ No text content found in the document.",
+            "No text content found in the document.",
             "",
             gr.update(visible=False),
         )
         return
-    
-    progress(0.2, desc="🤖 Generating summary...")
-    
+
+    progress(0.2, desc="Generating summary...")
+
     for summary, structure, sources, _ in generate_summary(
         text, lang_code, language, words, custom_instruction, page_ranges
     ):
         formatted_output = format_output(summary, structure)
         sources_md = format_sources(sources, page_ranges is not None) if sources else "*Identifying sources...*"
         yield formatted_output, sources_md, gr.update(visible=True)
-    
-    progress(1.0, desc="✅ Complete!")
+
+    progress(1.0, desc="Complete!")
 
 
 # ============================================================================
@@ -433,101 +428,126 @@ def summarize(
 # ============================================================================
 
 THEME = gr.themes.Soft(
-    primary_hue="indigo",
-    secondary_hue="blue",
+    primary_hue=gr.themes.Color(
+        c50="#f5f3ff",
+        c100="#ede9fe",
+        c200="#ddd6fe",
+        c300="#c4b5fd",
+        c400="#a78bfa",
+        c500="#8b5cf6",
+        c600="#7c3aed",
+        c700="#220475",
+        c800="#1a0359",
+        c900="#130242",
+        c950="#0a0124",
+    ),
+    secondary_hue=gr.themes.Color(
+        c50="#fdfcfa",
+        c100="#f9f7f2",
+        c200="#f5f0e5",
+        c300="#ebe4d4",
+        c400="#ddd4c0",
+        c500="#c9bda6",
+        c600="#b5a78c",
+        c700="#9a8e73",
+        c800="#7f755f",
+        c900="#665e4d",
+        c950="#4d4639",
+    ),
     neutral_hue="slate",
-    font=gr.themes.GoogleFont("Inter"),
+    font=gr.themes.GoogleFont("General Sans"),
 ).set(
-    body_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    body_background_fill_dark="linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
-    block_background_fill="white",
-    block_background_fill_dark="#1e1e2e",
-    block_radius="12px",
-    block_shadow="0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    body_background_fill="#f5f2ea",
+    body_background_fill_dark="#f5f2ea",
+    block_background_fill="#ffffff",
+    block_background_fill_dark="#ffffff",
+    block_radius="0.5rem",
+    block_shadow="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    block_border_width="1px",
+    block_border_color="#e2e8f0",
+    button_primary_background_fill="#220475",
+    button_primary_background_fill_hover="#1a0359",
+    button_primary_text_color="#ffffff",
+    input_background_fill="#ffffff",
+    input_border_color="#e2e8f0",
+    input_border_width="1px",
 )
 
 CSS = """
-/* Full width layout */
+/* Base layout */
 .gradio-container {
-    max-width: 100% !important;
-    padding: 0 3rem !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 2rem !important;
 }
 
 /* Header styling */
 .main-header {
     text-align: center;
-    padding: 2.5rem 2rem;
-    background: rgba(30, 30, 46, 0.6);
-    backdrop-filter: blur(10px);
-    border-radius: 16px;
-    margin-bottom: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem 1.5rem;
+    background: #ffffff;
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
 }
 
 .main-header h1 {
-    font-size: 2.75rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin-bottom: 0.75rem;
+    font-size: 2rem;
+    font-weight: 600;
+    color: #220475;
+    margin-bottom: 0.5rem;
 }
 
 .main-header p {
-    color: #94a3b8;
-    font-size: 1.15rem;
+    color: #64748b;
+    font-size: 1rem;
     margin: 0;
 }
 
-/* Card styling */
-.input-card, .output-card {
-    background: rgba(30, 30, 46, 0.8) !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
-    border-radius: 16px !important;
-    padding: 1.5rem !important;
-}
-
 /* Section headers */
 .section-title {
-    color: #e2e8f0 !important;
-    font-size: 1.1rem !important;
+    color: #220475 !important;
+    font-size: 1rem !important;
     font-weight: 600 !important;
-    margin-bottom: 1rem !important;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    margin-bottom: 0.75rem !important;
+}
+
+.section-title h3 {
+    color: #220475 !important;
+    margin: 0 !important;
 }
 
 /* Summary output */
 .summary-text {
-    font-size: 1.05rem !important;
-    line-height: 1.85 !important;
-    color: #e2e8f0 !important;
+    font-size: 1rem !important;
+    line-height: 1.75 !important;
+    color: #020817 !important;
     background: transparent !important;
 }
 
 /* Thinking section */
 .thinking-section {
-    background: rgba(99, 102, 241, 0.08);
-    border-left: 3px solid #6366f1;
-    border-radius: 0 8px 8px 0;
+    background: #f5f0e5;
+    border-left: 3px solid #220475;
+    border-radius: 0 0.5rem 0.5rem 0;
     padding: 1rem 1.25rem;
     margin-bottom: 0;
 }
 
 .thinking-section p {
-    color: #a5b4fc !important;
-    font-size: 0.95rem !important;
-    line-height: 1.7 !important;
+    color: #220475 !important;
+    font-size: 0.9rem !important;
+    line-height: 1.6 !important;
     margin: 0 !important;
+    opacity: 0.85;
 }
 
 /* Summary divider */
 .summary-divider {
     height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
-    margin: 1.5rem 0;
+    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
+    margin: 1.25rem 0;
 }
 
 /* Summary section */
@@ -535,23 +555,23 @@ CSS = """
     padding-top: 0.5rem;
 }
 
-/* Sources panel - fixed styling */
+/* Sources panel */
 .sources-panel {
-    background: #252536 !important;
-    border-radius: 12px !important;
-    padding: 1.25rem !important;
-    font-size: 0.95rem !important;
+    background: #f9f7f2 !important;
+    border-radius: 0.5rem !important;
+    padding: 1rem !important;
+    font-size: 0.9rem !important;
     max-height: 400px !important;
     overflow-y: auto !important;
-    color: #cbd5e1 !important;
-    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+    color: #020817 !important;
+    border: 1px solid #e2e8f0 !important;
 }
 
 .sources-panel p {
-    color: #cbd5e1 !important;
-    margin-bottom: 0.75rem !important;
+    color: #020817 !important;
+    margin-bottom: 0.5rem !important;
     padding: 0.5rem 0 !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+    border-bottom: 1px solid #e2e8f0 !important;
 }
 
 .sources-panel p:last-child {
@@ -560,105 +580,91 @@ CSS = """
 }
 
 .sources-panel strong {
-    color: #a5b4fc !important;
+    color: #220475 !important;
 }
 
 /* Accordion styling */
 .accordion {
     background: transparent !important;
-    border: none !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 0.5rem !important;
 }
 
 .accordion > .label-wrap {
-    background: rgba(37, 37, 54, 0.6) !important;
-    border-radius: 10px !important;
+    background: #f9f7f2 !important;
+    border-radius: 0.5rem !important;
     padding: 0.75rem 1rem !important;
-    border: 1px solid rgba(255, 255, 255, 0.06) !important;
 }
 
 /* Generate button */
 .generate-btn {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+    background: #220475 !important;
     border: none !important;
-    font-weight: 600 !important;
-    font-size: 1.05rem !important;
-    padding: 0.875rem 2rem !important;
-    border-radius: 10px !important;
-    transition: all 0.2s ease !important;
-    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
+    font-weight: 500 !important;
+    font-size: 1rem !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 0.5rem !important;
+    transition: all 0.15s ease !important;
+    color: #ffffff !important;
 }
 
 .generate-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
+    background: #1a0359 !important;
+    transform: translateY(-1px) !important;
 }
 
-/* Input fields */
-.dark input, .dark textarea {
-    background: #252536 !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    color: #e2e8f0 !important;
-    border-radius: 8px !important;
-}
-
-.dark input:focus, .dark textarea:focus {
-    border-color: #6366f1 !important;
-    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
+.generate-btn:disabled {
+    background: #9ca3af !important;
 }
 
-/* Dropdown */
-.dark select {
-    background: #252536 !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    color: #e2e8f0 !important;
+/* Input fields */
+input, textarea {
+    background: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    color: #020817 !important;
+    border-radius: 0.5rem !important;
 }
 
-/* Slider */
-.dark .slider {
-    background: #252536 !important;
+input:focus, textarea:focus {
+    border-color: #220475 !important;
+    box-shadow: 0 0 0 2px rgba(34, 4, 117, 0.1) !important;
+    outline: none !important;
 }
 
 /* File upload */
-.dark .upload-button {
-    background: #252536 !important;
-    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
-    border-radius: 12px !important;
+.upload-button {
+    background: #ffffff !important;
+    border: 2px dashed #d5d6ef !important;
+    border-radius: 0.5rem !important;
+    transition: all 0.15s ease !important;
 }
 
-.dark .upload-button:hover {
-    border-color: #6366f1 !important;
-    background: rgba(99, 102, 241, 0.1) !important;
-}
-
-/* Divider */
-.divider {
-    color: #64748b !important;
-    text-align: center;
-    margin: 1rem 0;
+.upload-button:hover {
+    border-color: #220475 !important;
+    background: #f5f0e5 !important;
 }
 
 /* Footer */
 .footer {
     text-align: center;
     padding: 1.5rem;
-    margin-top: 2rem;
-    color: #94a3b8;
-    font-size: 0.9rem;
+    margin-top: 1.5rem;
+    color: #64748b;
+    font-size: 0.875rem;
 }
 
 .footer a {
-    color: #a5b4fc;
+    color: #220475;
     text-decoration: none;
-    transition: color 0.2s;
+    transition: opacity 0.15s;
 }
 
 .footer a:hover {
-    color: #c4b5fd;
-    text-decoration: underline;
+    opacity: 0.7;
 }
 
 .footer-divider {
-    color: #475569;
+    color: #cbd5e1;
     margin: 0 0.5rem;
 }
 
@@ -670,13 +676,23 @@ footer {
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .gradio-container {
-        padding: 0 1rem !important;
+        padding: 1rem !important;
     }
-    
+
     .main-header h1 {
-        font-size: 2rem;
+        font-size: 1.5rem;
+    }
+
+    .main-header {
+        padding: 1.5rem 1rem;
     }
 }
+
+/* Loading state */
+.generating {
+    opacity: 0.7;
+    pointer-events: none;
+}
 """
 
 
@@ -684,54 +700,37 @@ footer {
 # Gradio Interface
 # ============================================================================
 
-FORCE_DARK_MODE_JS = """
-() => {
-    document.body.classList.remove('light');
-    document.body.classList.add('dark');
-}
-"""
-
-
 def create_app() -> gr.Blocks:
     """Create the Gradio application."""
-    with gr.Blocks(title="sui-1 Summarizer", theme=THEME, css=CSS, js=FORCE_DARK_MODE_JS) as app:
+    with gr.Blocks(title="sui-1 Summarizer", theme=THEME, css=CSS) as app:
         
         # Header
         gr.HTML("""
         <div class="main-header">
-            <h1>📄 sui-1 Summarizer</h1>
+            <h1>sui-1 Summarizer</h1>
             <p>Generate grounded summaries with verifiable source citations</p>
         </div>
         """)
-        
+
         with gr.Row(equal_height=False):
             # Left column: Inputs
             with gr.Column(scale=1):
-                gr.Markdown("### 📥 Input", elem_classes=["section-title"])
-                
+                gr.Markdown("### Upload Document", elem_classes=["section-title"])
+
                 pdf_input = gr.File(
-                    label="Upload PDF",
+                    label="PDF Document",
                     file_types=[".pdf"],
                     type="filepath",
                 )
-                
-                gr.Markdown("<div class='divider'>— or —</div>")
-                
-                text_input = gr.Textbox(
-                    label="Paste Text",
-                    placeholder="Paste your document text here...",
-                    lines=8,
-                    max_lines=15,
-                )
-                
-                gr.Markdown("### ⚙️ Settings", elem_classes=["section-title"])
-                
+
+                gr.Markdown("### Settings", elem_classes=["section-title"])
+
                 language = gr.Dropdown(
                     choices=list(LANGUAGES.keys()),
-                    value="English",
+                    value="German",
                     label="Output Language",
                 )
-                
+
                 words = gr.Slider(
                     minimum=100,
                     maximum=800,
@@ -740,51 +739,49 @@ def create_app() -> gr.Blocks:
                     label="Target Word Count",
                     info="Longer summaries include more citations",
                 )
-                
+
                 custom_instruction = gr.Textbox(
                     label="Custom Instructions (Optional)",
-                    placeholder="e.g., 'Focus on methodology' or 'Use bullet points'",
+                    placeholder="e.g., Focus on methodology, Use bullet points",
                     lines=2,
                 )
-                
+
                 generate_btn = gr.Button(
-                    "✨ Generate Summary",
+                    "Generate Summary",
                     variant="primary",
                     size="lg",
                     elem_classes=["generate-btn"],
                 )
-            
+
             # Right column: Output
             with gr.Column(scale=1):
-                gr.Markdown("### 📋 Summary", elem_classes=["section-title"])
+                gr.Markdown("### Summary", elem_classes=["section-title"])
 
                 summary_output = gr.Markdown(
                     value="*Your summary will appear here...*",
                     elem_classes=["summary-text"],
                 )
-                
+
                 with gr.Accordion(
-                    "📚 Source Citations",
+                    "Source Citations",
                     open=False,
                     visible=False,
                 ) as sources_accordion:
                     sources_output = gr.Markdown(elem_classes=["sources-panel"])
-        
+
         # Event handlers
         generate_btn.click(
             fn=summarize,
-            inputs=[pdf_input, text_input, language, words, custom_instruction],
+            inputs=[pdf_input, language, words, custom_instruction],
             outputs=[summary_output, sources_output, sources_accordion],
         )
-        
+
         # Footer
         gr.HTML("""
         <div class="footer">
-            <strong>Model:</strong> <a href="https://huggingface.co/ellamind/sui-1-24b" target="_blank">ellamind/sui-1-24b</a>
-            <span class="footer-divider">•</span>
-            <strong>PDF OCR:</strong> <a href="https://docs.mistral.ai/capabilities/document_ai" target="_blank">Mistral OCR</a>
-            <span class="footer-divider">•</span>
-            Made with 💜 by <a href="https://huggingface.co/ellamind" target="_blank">ellamind</a>
+            <a href="https://huggingface.co/ellamind/sui-1-24b" target="_blank">sui-1-24b</a>
+            <span class="footer-divider">|</span>
+            <a href="https://huggingface.co/ellamind" target="_blank">ellamind</a>
         </div>
         """)