feat: add supported chart examples and unsupported type warning

Author: kiku-jw

docs/example_bar.png

@@ -686,6 +686,69 @@
       text-decoration: none;
     }
 
+    /* Examples Section */
+    .examples-section {
+      max-width: 800px;
+      margin: 0 auto 48px;
+    }
+
+    .examples-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      margin-bottom: 24px;
+    }
+
+    .example-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 16px;
+      text-align: center;
+      transition: all 0.3s;
+    }
+
+    .example-card:hover {
+      border-color: var(--accent);
+      transform: translateY(-4px);
+    }
+
+    .example-card img {
+      width: 100%;
+      height: 120px;
+      object-fit: cover;
+      border-radius: 8px;
+      margin-bottom: 12px;
+      background: #fff;
+    }
+
+    .example-card span {
+      font-weight: 600;
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+    }
+
+    .warning-box {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      padding: 20px 24px;
+      background: rgba(255, 200, 50, 0.1);
+      border: 1px solid rgba(255, 200, 50, 0.3);
+      border-radius: 12px;
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+    }
+
+    .warning-icon {
+      font-size: 1.5rem;
+      flex-shrink: 0;
+    }
+
+    .warning-box strong {
+      color: #ffc832;
+    }
+
     @media (max-width: 768px) {
       .nav-links {
         display: none;
@@ -881,6 +944,35 @@ <h2>Comparison</h2>
         <h2>Try It Now</h2>
         <p>Extract data from your chart in seconds</p>
       </div>
+
+      <!-- Supported Charts Examples -->
+      <div class="examples-section">
+        <h3 style="text-align: center; margin-bottom: 24px; color: var(--text-secondary);">✅ Supported Chart Types</h3>
+        <div class="examples-grid">
+          <div class="example-card">
+            <img src="example_line.png" alt="Line chart example">
+            <span>Line Chart</span>
+          </div>
+          <div class="example-card">
+            <img src="example_bar.png" alt="Bar chart example">
+            <span>Bar Chart</span>
+          </div>
+          <div class="example-card">
+            <img src="example_scatter.png" alt="Scatter plot example">
+            <span>Scatter Plot</span>
+          </div>
+        </div>
+
+        <div class="warning-box">
+          <span class="warning-icon">⚠️</span>
+          <div>
+            <strong>Not Supported:</strong> Heatmaps, pie charts, GitHub contribution graphs, treemaps, and other
+            non-standard visualizations.
+            Charts must have clear X/Y axes with numerical labels.
+          </div>
+        </div>
+      </div>
+
       <div class="demo-container">
         <div class="api-key-box">
           <label for="apiKey">🔑 Mistral API Key</label>
@@ -891,7 +983,7 @@ <h2>Try It Now</h2>
         <div class="dropzone" id="dropzone">
           <div class="dropzone-icon">📊</div>
           <h3>Drop your chart here</h3>
-          <p>or click to browse • PNG, JPG, WebP</p>
+          <p>Line charts, bar charts, scatter plots only</p>
           <input type="file" id="fileInput" accept="image/*" hidden>
         </div>
 
@@ -1010,7 +1102,21 @@ <h4>✅ Extracted Data</h4>
             messages: [{
               role: 'user',
               content: [
-                { type: 'text', text: `Extract all data points from this chart. Output ONLY CSV with headers (x,y for line/scatter, label,value for bar). No explanations.` },
+                {
+                  type: 'text', text: `Analyze this image. You ONLY support: line charts, bar charts, and scatter plots with clear X/Y axes.
+
+If this is NOT a supported chart type (e.g., heatmap, pie chart, GitHub contribution graph, treemap, dashboard, table, or any image without clear X and Y axes), respond ONLY with:
+ERROR: Not a supported chart type. Please upload a line chart, bar chart, or scatter plot with clear X/Y axes.
+
+If it IS a supported chart:
+1. Identify the chart type
+2. Read the X and Y axis labels/values
+3. Extract ALL data points
+4. Output ONLY CSV with headers:
+   - For line/scatter charts: x,y
+   - For bar charts: label,value
+
+No explanations. Just CSV data or error message.` },
                 { type: 'image_url', image_url: base64 }
               ]
             }],
@@ -1023,6 +1129,11 @@ <h4>✅ Extracted Data</h4>
         const data = await resp.json();
         let csv = data.choices[0].message.content.trim().replace(/```csv\n?/g, '').replace(/```\n?/g, '').trim();
 
+        // Check if AI rejected the image
+        if (csv.startsWith('ERROR:')) {
+          throw new Error(csv.replace('ERROR:', '').trim());
+        }
+
         currentCSV = csv;
         csvOutput.textContent = csv;
         pointCount.textContent = `📍 ${csv.trim().split('\n').length - 1} points`;