Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| from openai import OpenAI | |
| import os | |
| import base64 | |
| from PIL import Image | |
| import io | |
| client = OpenAI( | |
| base_url="https://openrouter.ai/api/v1", | |
| api_key=os.environ.get("OPENROUTER_API_KEY") | |
| ) | |
| def image_to_base64(image): | |
| pil_image = Image.fromarray(image) | |
| buffer = io.BytesIO() | |
| pil_image.save(buffer, format="PNG") | |
| encoded = base64.b64encode(buffer.getvalue()).decode("utf-8") | |
| return encoded | |
| def analyze_chart(image, analysis_type): | |
| if image is None: | |
| return "⚠️ Please upload a chart image first." | |
| prompts = { | |
| "Full Analyst Report": """ | |
| You are a senior data analyst. Analyze this chart and provide: | |
| 📊 CHART TYPE & OVERVIEW | |
| - What type of chart is this? | |
| - What is the main topic/dataset? | |
| 📈 KEY TRENDS & PATTERNS | |
| - What are the major trends visible? | |
| - Are there any peaks, dips, or anomalies? | |
| 🔍 DEEP INSIGHTS | |
| - What are the 3 most important insights? | |
| - What story does this data tell? | |
| ✅ RECOMMENDATIONS | |
| - What actions would you recommend based on this data? | |
| - What should be monitored going forward? | |
| Write in a professional analyst tone. | |
| """, | |
| "Quick Summary": """ | |
| Look at this chart and give a SHORT 5-line summary: | |
| - What the chart shows | |
| - The biggest trend | |
| - The most important number or data point | |
| - One anomaly if any | |
| - One recommendation | |
| """, | |
| "Find Anomalies": """ | |
| You are a data quality expert. Examine this chart carefully and: | |
| - Identify ALL anomalies, outliers, or unusual patterns | |
| - Explain why each one is unusual | |
| - Rate the severity (Low / Medium / High) | |
| - Suggest possible reasons for each anomaly | |
| """, | |
| "Compare & Contrast": """ | |
| Analyze this chart and: | |
| - Identify all data series or categories being compared | |
| - Compare them against each other in detail | |
| - Identify which is highest, lowest, growing fastest, declining | |
| - Explain what the comparison reveals about the subject | |
| """ | |
| } | |
| prompt = prompts[analysis_type] | |
| try: | |
| img_base64 = image_to_base64(image) | |
| response = client.chat.completions.create( | |
| model="nex-agi/nex-n2-pro:free", | |
| messages=[ | |
| { | |
| "role": "user", | |
| "content": [ | |
| { | |
| "type": "image_url", | |
| "image_url": { | |
| "url": f"data:image/png;base64,{img_base64}" | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "text": prompt | |
| } | |
| ] | |
| } | |
| ] | |
| ) | |
| return response.choices[0].message.content | |
| except Exception as e: | |
| return f"❌ Error: {str(e)}" | |
| custom_css = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { font-family: 'Inter', sans-serif; } | |
| body { background: linear-gradient(135deg, #f5f0ff 0%, #e8f4fd 100%); } | |
| .gradio-container { | |
| max-width: 1100px !important; | |
| margin: auto !important; | |
| } | |
| /* Hero Header */ | |
| .hero-header { | |
| background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); | |
| border-radius: 20px; | |
| padding: 40px; | |
| text-align: center; | |
| margin-bottom: 24px; | |
| box-shadow: 0 8px 32px rgba(106,17,203,0.3); | |
| } | |
| .hero-header h1 { | |
| color: white !important; | |
| font-size: 2.8em !important; | |
| font-weight: 700 !important; | |
| margin: 0 !important; | |
| letter-spacing: -0.5px; | |
| } | |
| .hero-header p { | |
| color: rgba(255,255,255,0.85) !important; | |
| font-size: 1.1em !important; | |
| margin-top: 8px !important; | |
| } | |
| .badge { | |
| display: inline-block; | |
| background: rgba(255,255,255,0.2); | |
| color: white; | |
| padding: 4px 14px; | |
| border-radius: 20px; | |
| font-size: 0.85em; | |
| margin-top: 12px; | |
| border: 1px solid rgba(255,255,255,0.3); | |
| } | |
| /* Stats Row */ | |
| .stats-row { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| flex: 1; | |
| background: white; | |
| border-radius: 12px; | |
| padding: 16px; | |
| text-align: center; | |
| box-shadow: 0 2px 12px rgba(0,0,0,0.06); | |
| border-top: 3px solid #6a11cb; | |
| } | |
| .stat-card .number { | |
| font-size: 1.8em; | |
| font-weight: 700; | |
| color: #6a11cb; | |
| } | |
| .stat-card .label { | |
| font-size: 0.8em; | |
| color: #78909c; | |
| margin-top: 4px; | |
| } | |
| /* Upload Card */ | |
| .upload-card { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 24px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.08); | |
| border: 1px solid #ede7f6; | |
| } | |
| /* Result Card */ | |
| .result-card { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 24px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.08); | |
| border: 1px solid #e3f2fd; | |
| } | |
| /* Tips Box */ | |
| .tips-box { | |
| background: linear-gradient(135deg, #ede7f6, #e3f2fd); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| margin-top: 16px; | |
| border-left: 4px solid #6a11cb; | |
| } | |
| .tips-box p { | |
| margin: 4px 0 !important; | |
| color: #37474f !important; | |
| font-size: 0.9em !important; | |
| } | |
| /* Analyze Button */ | |
| .analyze-btn { | |
| background: linear-gradient(135deg, #6a11cb, #2575fc) !important; | |
| border: none !important; | |
| border-radius: 12px !important; | |
| font-size: 1.1em !important; | |
| font-weight: 600 !important; | |
| padding: 14px !important; | |
| letter-spacing: 0.3px !important; | |
| box-shadow: 0 4px 15px rgba(106,17,203,0.4) !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .analyze-btn:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 6px 20px rgba(106,17,203,0.5) !important; | |
| } | |
| /* Dropdown */ | |
| select { | |
| border-radius: 10px !important; | |
| border: 1.5px solid #ede7f6 !important; | |
| padding: 10px !important; | |
| font-size: 0.95em !important; | |
| color: #37474f !important; | |
| } | |
| /* Textbox */ | |
| textarea { | |
| border-radius: 12px !important; | |
| border: 1.5px solid #e3f2fd !important; | |
| font-size: 0.95em !important; | |
| line-height: 1.7 !important; | |
| color: #263238 !important; | |
| background: #fafffe !important; | |
| } | |
| /* Image upload area */ | |
| .image-upload { | |
| border-radius: 12px !important; | |
| border: 2px dashed #ce93d8 !important; | |
| } | |
| /* Footer */ | |
| .footer-note { | |
| background: linear-gradient(135deg, #f3e5f5, #e8f4fd); | |
| border-radius: 12px; | |
| padding: 14px 20px; | |
| margin-top: 20px; | |
| text-align: center; | |
| border-left: 4px solid #2575fc; | |
| } | |
| .footer-note p { | |
| color: #37474f !important; | |
| font-size: 0.88em !important; | |
| margin: 0 !important; | |
| } | |
| """ | |
| with gr.Blocks(css=custom_css, title="📊 ChartTalker") as app: | |
| # Hero Header | |
| gr.HTML(""" | |
| <div class="hero-header"> | |
| <h1>📊 ChartTalker</h1> | |
| <p>Upload any chart → Get an instant analyst-level report in seconds</p> | |
| <span class="badge">🤖 Powered by AI Vision · Free · Instant</span> | |
| </div> | |
| """) | |
| # Stats Row | |
| gr.HTML(""" | |
| <div class="stats-row"> | |
| <div class="stat-card"> | |
| <div class="number">📊</div> | |
| <div class="label">Full Report</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="number">⚡</div> | |
| <div class="label">Quick Summary</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="number">🔍</div> | |
| <div class="label">Find Anomalies</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="number">⚖️</div> | |
| <div class="label">Compare & Contrast</div> | |
| </div> | |
| </div> | |
| """) | |
| with gr.Row(equal_height=True): | |
| # Left Column | |
| with gr.Column(scale=1): | |
| gr.HTML('<div class="upload-card">') | |
| gr.HTML('<h3 style="color:#6a11cb; margin:0 0 16px 0;">📤 Upload Your Chart</h3>') | |
| image_input = gr.Image( | |
| label="", | |
| type="numpy", | |
| height=280, | |
| elem_classes=["image-upload"] | |
| ) | |
| analysis_type = gr.Dropdown( | |
| choices=[ | |
| "Full Analyst Report", | |
| "Quick Summary", | |
| "Find Anomalies", | |
| "Compare & Contrast" | |
| ], | |
| value="Full Analyst Report", | |
| label="🔍 Choose Analysis Type" | |
| ) | |
| analyze_btn = gr.Button( | |
| "🚀 Analyze Chart", | |
| variant="primary", | |
| size="lg", | |
| elem_classes=["analyze-btn"] | |
| ) | |
| gr.HTML(""" | |
| <div class="tips-box"> | |
| <p>📸 <strong>Supported chart types:</strong></p> | |
| <p>✅ Bar, Line, Pie, Scatter</p> | |
| <p>✅ Histogram, Heatmap</p> | |
| <p>✅ Dashboard screenshots</p> | |
| <p>✅ Any data visualization</p> | |
| </div> | |
| """) | |
| gr.HTML('</div>') | |
| # Right Column | |
| with gr.Column(scale=1): | |
| gr.HTML('<div class="result-card">') | |
| gr.HTML('<h3 style="color:#2575fc; margin:0 0 16px 0;">📝 Analysis Report</h3>') | |
| output = gr.Textbox( | |
| label="", | |
| lines=22, | |
| placeholder="Your analysis report will appear here...\n\nUpload a chart and click '🚀 Analyze Chart' to get started!", | |
| ) | |
| gr.HTML('</div>') | |
| # Footer | |
| gr.HTML(""" | |
| <div class="footer-note"> | |
| <p>⚡ <strong>ChartTalker</strong> — Built with Python, Gradio & AI Vision. | |
| Supports Bar, Line, Pie, Scatter, Histogram, Heatmap and more!</p> | |
| </div> | |
| """) | |
| analyze_btn.click( | |
| fn=analyze_chart, | |
| inputs=[image_input, analysis_type], | |
| outputs=output | |
| ) | |
| app.launch() |