Update app.py

app.py

@@ -131,7 +131,7 @@ custom_css = """
 }
 
 .gradio-container {
-    background: linear-gradient(135deg, rgb(95 243 242) 0%, rgb(118, 75, 162) 100%) !important
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 }
 
 #main-container {
@@ -143,7 +143,7 @@ custom_css = """
 }
 
 .header-title {
-    background: linear-gradient(135deg, rgb(30 44 105) 0%, rgb(118, 75, 162) 100%) text;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 3em;
@@ -374,6 +374,180 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
                         info="Maximum length of response"
                     )
                 
+                # File Support Tab
+                with gr.Tab("📁 Supported Files", elem_classes=["tab-nav"]):
+                    gr.HTML("""
+                        <div style='text-align: center; margin-bottom: 30px;'>
+                            <h2 style='color: #667eea; font-size: 2em; margin-bottom: 10px;'>📁 Supported File Types</h2>
+                            <p style='color: #666; font-size: 1.1em;'>Nemotron Nano 2 VL accepts a wide variety of file formats</p>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);'>
+                            <h3 style='color: #667eea; display: flex; align-items: center; gap: 10px;'>
+                                🖼️ Image Files
+                            </h3>
+                            <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;'>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>📷 JPEG/JPG</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>Standard photo format</p>
+                                </div>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>🎨 PNG</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>Lossless with transparency</p>
+                                </div>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>🎬 GIF</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>Animated images</p>
+                                </div>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>🌐 WebP</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>Modern web format</p>
+                                </div>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>🖼️ BMP</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>Bitmap images</p>
+                                </div>
+                                <div style='background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #667eea;'>📐 TIFF</strong>
+                                    <p style='margin: 5px 0 0 0; color: #666; font-size: 0.9em;'>High-quality scans</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%); margin-top: 20px;'>
+                            <h3 style='color: #f57c00; display: flex; align-items: center; gap: 10px;'>
+                                📄 Document Files
+                            </h3>
+                            <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;'>
+                                <div style='background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #f57c00; font-size: 1.1em;'>📕 PDF Documents</strong>
+                                    <p style='margin: 10px 0 0 0; color: #666; line-height: 1.6;'>
+                                        • Multi-page support<br>
+                                        • Text extraction<br>
+                                        • Layout analysis<br>
+                                        • Scanned documents<br>
+                                        • Forms and tables
+                                    </p>
+                                </div>
+                                <div style='background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                                    <strong style='color: #f57c00; font-size: 1.1em;'>📝 Text Files (.txt)</strong>
+                                    <p style='margin: 10px 0 0 0; color: #666; line-height: 1.6;'>
+                                        • Plain text documents<br>
+                                        • Code snippets<br>
+                                        • Notes and logs<br>
+                                        • Data files<br>
+                                        • Configuration files
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div style='margin-top: 30px; text-align: center;'>
+                            <h2 style='color: #667eea; font-size: 2em; margin-bottom: 20px;'>🎯 What the Model Excels At</h2>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);'>
+                            <h3 style='color: #2e7d32;'>📊 1. Document Intelligence</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Multi-page PDF analysis</strong> - Process entire documents at once</li>
+                                    <li><strong>Scanned documents</strong> - Extract text from scans and photos of documents</li>
+                                    <li><strong>Forms and tables</strong> - Understand structured data layouts</li>
+                                    <li><strong>Financial reports</strong> - Parse complex financial documents</li>
+                                    <li><strong>Receipts and invoices</strong> - Extract itemized information</li>
+                                    <li><strong>Academic papers</strong> - Understand scientific content and citations</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #fff9c4 0%, #fff3e0 100%);'>
+                            <h3 style='color: #f57f17;'>🔤 2. OCR Excellence (Optical Character Recognition)</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Handwritten text</strong> - Recognize cursive and printed handwriting</li>
+                                    <li><strong>Printed text</strong> - Extract text from any printed material</li>
+                                    <li><strong>Text in images</strong> - Find and read text embedded in photos</li>
+                                    <li><strong>Multi-language support</strong> - Handle various languages and scripts</li>
+                                    <li><strong>Low-quality images</strong> - Work with blurry or low-resolution scans</li>
+                                    <li><strong>Complex layouts</strong> - Handle multi-column and mixed layouts</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #e1bee7 0%, #f3e5f5 100%);'>
+                            <h3 style='color: #6a1b9a;'>📈 3. Chart & Graph Analysis</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Bar charts</strong> - Interpret categorical data comparisons</li>
+                                    <li><strong>Line graphs</strong> - Analyze trends over time</li>
+                                    <li><strong>Pie charts</strong> - Understand proportional distributions</li>
+                                    <li><strong>Scatter plots</strong> - Identify correlations and patterns</li>
+                                    <li><strong>Complex visualizations</strong> - Parse multi-axis and combined charts</li>
+                                    <li><strong>Infographics</strong> - Extract insights from visual data stories</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #b3e5fc 0%, #e1f5fe 100%);'>
+                            <h3 style='color: #01579b;'>🎬 4. Video Understanding (Frame-by-Frame)</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Sequential frames</strong> - Upload multiple frames from videos</li>
+                                    <li><strong>Action recognition</strong> - Understand what's happening across frames</li>
+                                    <li><strong>Temporal analysis</strong> - Track changes over time</li>
+                                    <li><strong>Scene understanding</strong> - Comprehend context and setting</li>
+                                    <li><strong>Object tracking</strong> - Follow objects across frames</li>
+                                    <li><strong>Event detection</strong> - Identify key moments in sequences</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #ffccbc 0%, #ffe0b2 100%);'>
+                            <h3 style='color: #bf360c;'>📑 5. Multi-Image Document Processing</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Multiple pages at once</strong> - Upload and analyze entire documents</li>
+                                    <li><strong>Cross-reference</strong> - Connect information across different images</li>
+                                    <li><strong>Document comparison</strong> - Compare versions or similar documents</li>
+                                    <li><strong>Batch processing</strong> - Handle multiple documents simultaneously</li>
+                                    <li><strong>Presentation slides</strong> - Understand slide decks and flow</li>
+                                    <li><strong>Comic books/Manga</strong> - Follow visual narratives</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='capability-card' style='background: linear-gradient(135deg, #c5e1a5 0%, #dcedc8 100%);'>
+                            <h3 style='color: #33691e;'>🧠 6. Advanced Reasoning</h3>
+                            <div style='background: white; padding: 20px; border-radius: 10px; margin-top: 15px;'>
+                                <ul style='color: #666; line-height: 2; margin: 0; padding-left: 20px;'>
+                                    <li><strong>Step-by-step thinking</strong> - See the model's reasoning process</li>
+                                    <li><strong>Mathematical problems</strong> - Solve complex math with visual elements</li>
+                                    <li><strong>Logical deduction</strong> - Draw conclusions from visual evidence</li>
+                                    <li><strong>Problem decomposition</strong> - Break down complex questions</li>
+                                    <li><strong>Visual reasoning</strong> - Understand spatial and logical relationships</li>
+                                    <li><strong>Transparent thinking</strong> - Explain how conclusions are reached</li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <div class='success-box' style='margin-top: 30px; font-size: 1.05em;'>
+                            <strong>💡 Pro Tips for Best Results:</strong><br><br>
+                            ✅ <strong>High-quality images</strong> - Use clear, well-lit photos for better OCR<br>
+                            ✅ <strong>Multiple angles</strong> - Upload different views for complex objects<br>
+                            ✅ <strong>Specific questions</strong> - Ask targeted questions for precise answers<br>
+                            ✅ <strong>Enable reasoning</strong> - Turn on reasoning mode for complex analysis<br>
+                            ✅ <strong>Sequential order</strong> - Upload video frames in chronological order<br>
+                            ✅ <strong>Context matters</strong> - Provide background information for better understanding
+                        </div>
+                        
+                        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 16px; text-align: center; margin-top: 30px;'>
+                            <h3 style='margin: 0 0 10px 0; font-size: 1.5em;'>🚀 Ready to Get Started?</h3>
+                            <p style='margin: 0; font-size: 1.1em; opacity: 0.95;'>
+                                Upload your files in the Chat Interface tab and experience the power of Nemotron Nano 2 VL!
+                            </p>
+                        </div>
+                    """)
+                
                 # Examples Tab
                 with gr.Tab("📚 Examples & Capabilities", elem_classes=["tab-nav"]):
                     gr.HTML("""
@@ -508,8 +682,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
 # Launch the app
 if __name__ == "__main__":
     app.launch(
-        share=False,
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
+        share=True,
+        # server_name="0.0.0.0",
+        # server_port=7860,
+        # show_error=True
     )