Spaces:

chenguittiMaroua
/

asm-app

Sleeping

App Files Files Community

chenguittiMaroua commited on Apr 11

Commit

9a97ee3

verified ·

1 Parent(s): 5098252

Update static/indexAI.html

Browse files

Files changed (1) hide show

static/indexAI.html +110 -484

static/indexAI.html CHANGED Viewed

@@ -1,380 +1,105 @@
-<!--
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modern AI Website</title>
-  <link rel="stylesheet" href="static/test.css" />
-  <script defer src="static/test.js"></script>
-</head>
-<body>
-  <header>
-    <h1>AI Toolbox</h1>
-    <p>Explore powerful AI tools below</p>
-  </header>
-  <main>
-    <section class="cards">
-      <div class="card" onclick="showSection('summarizer')">
-        <div class="icon">📝</div>
-        <h2>Text Summarizer</h2>
-        <p>Summarize long articles into concise content.</p>
-      </div>
-      <div class="card" onclick="showSection('image-caption')">
-        <div class="icon">🖼️</div>
-        <h2>Image Captioning</h2>
-        <p>Upload an image to get a smart caption.</p>
-      </div>
-      <div class="card" onclick="showSection('code-explainer')">
-        <div class="icon">💡</div>
-        <h2>Code Explainer</h2>
-        <p>Understand what your code really does.</p>
-      </div>
-    </section>
-    <section id="summarizer" class="tool-section">
-      <h3>Text Summarizer</h3>
-      <textarea placeholder="Paste your article here..."></textarea>
-      <button>Summarize</button>
-    </section>
-    <section id="image-caption" class="tool-section">
-      <h3>Image Captioning</h3>
-      <input type="file" accept="image/*">
-      <button>Generate Caption</button>
-    </section>
-    <section id="code-explainer" class="tool-section">
-      <h3>Code Explainer</h3>
-      <textarea placeholder="Paste your code snippet here..."></textarea>
-      <button>Explain Code</button>
-    </section>
-  </main>
-  <footer>
-    <p>© 2025 AI Toolbox. All rights reserved.</p>
-  </footer>
-</body>
-</html>-->
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Excel Data Visualizer</title>
     <style>
-        :root {
-            --primary-color: #4CAF50;
-            --secondary-color: #f8f9fa;
-            --text-color: #333;
-            --border-color: #ddd;
-            --error-color: #dc3545;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            color: var(--text-color);
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .container {
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            padding: 30px;
-        }
-        h1 {
-            color: var(--primary-color);
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .upload-area {
-            border: 2px dashed var(--border-color);
-            border-radius: 6px;
-            padding: 30px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin-bottom: 20px;
-            background-color: var(--secondary-color);
-        }
-        .upload-area:hover {
-            border-color: var(--primary-color);
-            background-color: rgba(76, 175, 80, 0.05);
-        }
-        .upload-area.highlight {
-            border-color: var(--primary-color);
-            background-color: rgba(76, 175, 80, 0.1);
-        }
-        #file-input {
-            display: none;
-        }
-        .form-group {
-            margin-bottom: 20px;
-        }
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-        }
-        input[type="text"],
-        textarea,
-        select {
-            width: 100%;
-            padding: 12px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            font-size: 16px;
-            transition: border 0.3s;
-        }
-        textarea {
-            min-height: 100px;
-            resize: vertical;
-        }
-        input[type="text"]:focus,
-        textarea:focus,
-        select:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
-        }
-        button {
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            padding: 12px 20px;
-            font-size: 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            width: 100%;
-            transition: background-color 0.3s;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        button:hover {
-            background-color: #45a049;
-        }
-        button:disabled {
-            background-color: #cccccc;
-            cursor: not-allowed;
-        }
-        #result-container {
-            margin-top: 30px;
-            display: none;
-        }
-        #result-image {
-            max-width: 100%;
-            border-radius: 6px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
-        }
-        .code-block {
-            background-color: #f8f8f8;
-            padding: 15px;
-            border-radius: 4px;
-            overflow-x: auto;
-            font-family: 'Courier New', Courier, monospace;
-            border: 1px solid var(--border-color);
-        }
-        #error-message {
-            color: var(--error-color);
-            background-color: #f8d7da;
-            padding: 15px;
-            border-radius: 4px;
-            margin-top: 20px;
-            border: 1px solid #f5c6cb;
-            white-space: pre-line;
-            display: none;
-        }
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255,255,255,.3);
-            border-radius: 50%;
-            border-top-color: white;
-            animation: spin 1s ease-in-out infinite;
-            margin-right: 10px;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        .columns-info {
-            background-color: #e9f7ef;
-            padding: 15px;
-            border-radius: 4px;
-            margin-bottom: 20px;
-            border: 1px solid #c8e6d1;
-        }
-        .columns-info h3 {
-            margin-top: 0;
-            color: #2e7d32;
-        }
-        .columns-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-        }
-        .column-tag {
-            background-color: #c8e6d1;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 14px;
-        }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Excel Data Visualizer</h1>
-        <div class="upload-area" id="drop-area">
-            <p id="file-instructions">Drag & drop your Excel file here or click to browse</p>
-            <input type="file" id="file-input" accept=".xlsx,.xls">
-        </div>
-        <div class="form-group">
-            <label for="prompt">Visualization Prompt</label>
-            <textarea id="prompt" rows="3" placeholder="Example: Show sales trends by month"></textarea>
-            <p class="hint">Describe the visualization you want (e.g., "Compare revenue by region")</p>
-        </div>
-        <div class="form-group">
-            <label for="style">Chart Style</label>
-            <select id="style">
-                <option value="seaborn-v0_8">Seaborn (Default)</option>
-                <option value="ggplot">ggplot</option>
-                <option value="dark_background">Dark Background</option>
-                <option value="bmh">Bayesian Methods for Hackers</option>
-                <option value="fivethirtyeight">FiveThirtyEight</option>
-            </select>
         </div>
-        <button id="visualize-btn">
-            <span id="btn-text">Generate Visualization</span>
-        </button>
-        <div id="error-message"></div>
-        <div id="columns-info" class="columns-info" style="display: none;">
-            <h3>Detected Columns</h3>
-            <div class="columns-list" id="columns-list"></div>
-            <p>Tip: Reference these column names in your prompt for better results</p>
-        </div>
-        <div id="result-container">
-            <h2>Your Visualization</h2>
-            <img id="result-image">
-            <div class="form-group">
-                <label for="chart-title">Chart Title</label>
-                <input type="text" id="chart-title" placeholder="Custom chart title">
-            </div>
-            <button id="update-btn">Update Visualization</button>
-            <h3>Generated Python Code</h3>
-            <pre class="code-block" id="generated-code"></pre>
-            <div class="form-group">
-                <label for="code-feedback">Feedback on this visualization</label>
-                <textarea id="code-feedback" rows="2" placeholder="Was this what you expected? Any improvements?"></textarea>
-                <button id="feedback-btn">Send Feedback</button>
-            </div>
-        </div>
     </div>
     <script>
         // DOM Elements
         const dropArea = document.getElementById('drop-area');
         const fileInput = document.getElementById('file-input');
-        const fileInstructions = document.getElementById('file-instructions');
         const visualizeBtn = document.getElementById('visualize-btn');
-        const btnText = document.getElementById('btn-text');
         const resultContainer = document.getElementById('result-container');
         const resultImage = document.getElementById('result-image');
         const generatedCode = document.getElementById('generated-code');
         const errorMessage = document.getElementById('error-message');
-        const columnsInfo = document.getElementById('columns-info');
-        const columnsList = document.getElementById('columns-list');
-        const chartTitle = document.getElementById('chart-title');
         const updateBtn = document.getElementById('update-btn');
-        const feedbackBtn = document.getElementById('feedback-btn');
-        // State
-        let currentData = null;
-        // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            setupEventListeners();
         });
-        function setupEventListeners() {
-            // Drag and drop events
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                dropArea.addEventListener(eventName, preventDefaults, false);
-            });
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropArea.addEventListener(eventName, highlight, false);
-            });
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropArea.addEventListener(eventName, unhighlight, false);
-            });
-            dropArea.addEventListener('drop', handleDrop, false);
-            dropArea.addEventListener('click', () => fileInput.click());
-            fileInput.addEventListener('change', handleFileSelect);
-            // Button events
-            visualizeBtn.addEventListener('click', generateVisualization);
-            updateBtn.addEventListener('click', updateVisualization);
-            feedbackBtn.addEventListener('click', sendFeedback);
-        }
         function preventDefaults(e) {
             e.preventDefault();
             e.stopPropagation();
         }
         function highlight() {
-            dropArea.classList.add('highlight');
         }
         function unhighlight() {
-            dropArea.classList.remove('highlight');
         }
         function handleDrop(e) {
             const dt = e.dataTransfer;
             const files = dt.files;
@@ -390,33 +115,12 @@
         function handleFiles(files) {
             const file = files[0];
             fileInput.files = files;
-            fileInstructions.textContent = file.name;
-            // Preview the file (just show name for Excel files)
-            showFilePreview(file);
-        }
-        function showFilePreview(file) {
-            // For Excel files, we'll just show the name
-            const fileName = file.name;
-            fileInstructions.innerHTML = `
-                <strong>${fileName}</strong>
-                <div>${(file.size / 1024 / 1024).toFixed(2)} MB</div>
-            `;
-            // Read the file to get columns (simplified example)
-            previewExcelColumns(file);
-        }
-        function previewExcelColumns(file) {
-            // In a real app, you might use SheetJS or similar to peek at the file
-            // For this example, we'll just show a loading state
-            columnsInfo.style.display = 'block';
-            columnsList.innerHTML = '<div>Columns will appear after analysis</div>';
         }
-        async function generateVisualization() {
             const file = fileInput.files[0];
             const prompt = document.getElementById('prompt').value;
             const style = document.getElementById('style').value;
@@ -427,9 +131,8 @@
             }
             try {
-                // Show loading state
                 visualizeBtn.disabled = true;
-                btnText.innerHTML = '<span class="loading"></span> Processing...';
                 hideError();
                 const formData = new FormData();
@@ -442,140 +145,63 @@
                     body: formData
                 });
-                const data = await response.json();
                 if (!response.ok) {
-                    handleErrorResponse(data);
-                    return;
                 }
-                // Show results
-                currentData = data;
-                resultImage.src = `data:image/png;base64,${data.image_data}`;
-                generatedCode.textContent = data.code;
-                resultContainer.style.display = 'block';
-                // Update columns info
-                if (data.columns) {
-                    columnsList.innerHTML = '';
-                    data.columns.forEach(col => {
-                        const colElement = document.createElement('div');
-                        colElement.className = 'column-tag';
-                        colElement.textContent = col;
-                        columnsList.appendChild(colElement);
-                    });
-                }
-                // Set initial chart title
-                if (data.prompt) {
-                    chartTitle.value = `Visualization: ${data.prompt.substring(0, 50)}`;
-                    document.getElementById('prompt').value = data.prompt;
                 }
-                // Scroll to results
-                resultContainer.scrollIntoView({ behavior: 'smooth' });
             } catch (error) {
-                showError("Network error: " + error.message);
             } finally {
                 visualizeBtn.disabled = false;
-                btnText.textContent = 'Generate Visualization';
             }
-        }
-        async function updateVisualization() {
-            if (!currentData) return;
-            try {
-                updateBtn.disabled = true;
-                updateBtn.innerHTML = '<span class="loading"></span> Updating...';
-                const response = await fetch('/visualize/natural', {
-                    method: 'POST',
-                    body: createUpdateFormData()
-                });
-                const data = await response.json();
-                if (!response.ok) {
-                    handleErrorResponse(data);
-                    return;
-                }
-                // Update results
-                currentData = data;
-                resultImage.src = `data:image/png;base64,${data.image_data}`;
-                generatedCode.textContent = data.code;
-            } catch (error) {
-                showError("Update error: " + error.message);
-            } finally {
-                updateBtn.disabled = false;
-                updateBtn.textContent = 'Update Visualization';
-            }
-        }
-        function createUpdateFormData() {
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            formData.append('prompt', document.getElementById('prompt').value);
-            formData.append('style', document.getElementById('style').value);
-            return formData;
-        }
-        async function sendFeedback() {
-            const feedback = document.getElementById('code-feedback').value;
-            if (!feedback.trim()) {
-                showError("Please enter your feedback before sending");
                 return;
             }
-            try {
-                feedbackBtn.disabled = true;
-                feedbackBtn.innerHTML = '<span class="loading"></span> Sending...';
-                // In a real app, you would send this to your backend
-                // For now, we'll just show a confirmation
-                setTimeout(() => {
-                    alert("Thank you for your feedback!");
-                    document.getElementById('code-feedback').value = '';
-                    feedbackBtn.disabled = false;
-                    feedbackBtn.textContent = 'Send Feedback';
-                }, 1000);
-            } catch (error) {
-                showError("Failed to send feedback: " + error.message);
-                feedbackBtn.disabled = false;
-                feedbackBtn.textContent = 'Send Feedback';
-            }
-        }
-        function handleErrorResponse(errorData) {
-            let errorMsg = errorData.detail?.error || "Request failed";
-            if (errorData.detail?.message) {
-                errorMsg += `: ${errorData.detail.message}`;
-            }
-            if (errorData.detail?.suggestions) {
-                errorMsg += "\n\nSuggestions:\n" +
-                    errorData.detail.suggestions.join("\n• ");
-            }
-            if (errorData.detail?.your_prompt) {
-                errorMsg += `\n\nYour prompt was: "${errorData.detail.your_prompt}"`;
-            }
-            showError(errorMsg);
-        }
         function showError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
-            resultContainer.style.display = 'none';
-            // Scroll to error
-            errorMessage.scrollIntoView({ behavior: 'smooth' });
         }
         function hideError() {

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Excel Visualizer</title>
     <style>
+        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
+        .upload-area { border: 2px dashed #ccc; padding: 30px; text-align: center; cursor: pointer; margin-bottom: 20px; }
+        #preview { margin-top: 10px; font-weight: bold; }
+        #result-container { margin-top: 30px; display: none; }
+        #result-image { max-width: 100%; margin-bottom: 20px; }
+        .code-block { background: #f5f5f5; padding: 15px; overflow-x: auto; }
+        #error-message { color: red; margin-top: 20px; display: none; }
+        button { padding: 10px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; }
+        button:disabled { background: #cccccc; }
     </style>
 </head>
 <body>
+    <h1>Excel Data Visualizer</h1>
+    <div class="upload-area" id="drop-area">
+        <p>Drag & drop Excel file here or click to select</p>
+        <input type="file" id="file-input" accept=".xlsx,.xls" style="display: none;">
+        <div id="preview"></div>
+    </div>
+    <div>
+        <label for="prompt">Visualization Prompt:</label>
+        <textarea id="prompt" rows="3" style="width: 100%" placeholder="e.g. Show sales by region"></textarea>
+    </div>
+    <div>
+        <label for="style">Chart Style:</label>
+        <select id="style" style="width: 100%">
+            <option value="seaborn-v0_8">Seaborn</option>
+            <option value="ggplot">ggplot</option>
+            <option value="dark_background">Dark</option>
+        </select>
+    </div>
+    <button id="visualize-btn">Generate Visualization</button>
+    <div id="error-message"></div>
+    <div id="result-container">
+        <h2>Your Visualization</h2>
+        <img id="result-image">
+        <div>
+            <label for="chart-title">Chart Title:</label>
+            <input type="text" id="chart-title" style="width: 100%">
         </div>
+        <button id="update-btn">Update Visualization</button>
+        <h3>Generated Python Code</h3>
+        <pre class="code-block" id="generated-code"></pre>
     </div>
     <script>
         // DOM Elements
         const dropArea = document.getElementById('drop-area');
         const fileInput = document.getElementById('file-input');
+        const preview = document.getElementById('preview');
         const visualizeBtn = document.getElementById('visualize-btn');
         const resultContainer = document.getElementById('result-container');
         const resultImage = document.getElementById('result-image');
         const generatedCode = document.getElementById('generated-code');
         const errorMessage = document.getElementById('error-message');
         const updateBtn = document.getElementById('update-btn');
+        // Drag and drop functionality
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, preventDefaults, false);
         });
         function preventDefaults(e) {
             e.preventDefault();
             e.stopPropagation();
         }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropArea.addEventListener(eventName, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, unhighlight, false);
+        });
         function highlight() {
+            dropArea.style.borderColor = '#4CAF50';
+            dropArea.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
         }
         function unhighlight() {
+            dropArea.style.borderColor = '#ccc';
+            dropArea.style.backgroundColor = '';
         }
+        dropArea.addEventListener('drop', handleDrop, false);
+        dropArea.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
         function handleDrop(e) {
             const dt = e.dataTransfer;
             const files = dt.files;
         function handleFiles(files) {
             const file = files[0];
+            preview.innerHTML = `Selected: <strong>${file.name}</strong> (${(file.size/1024/1024).toFixed(2)} MB)`;
             fileInput.files = files;
         }
+        // Visualization functionality
+        visualizeBtn.addEventListener('click', async () => {
             const file = fileInput.files[0];
             const prompt = document.getElementById('prompt').value;
             const style = document.getElementById('style').value;
             }
             try {
                 visualizeBtn.disabled = true;
+                visualizeBtn.textContent = "Processing...";
                 hideError();
                 const formData = new FormData();
                     body: formData
                 });
                 if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || "Failed to generate visualization");
                 }
+                const result = await response.json();
+                if (result.status === "success") {
+                    resultImage.src = `data:image/png;base64,${result.image}`;
+                    generatedCode.textContent = result.code;
+                    document.getElementById('chart-title').value = result.title || "My Chart";
+                    resultContainer.style.display = 'block';
+                } else {
+                    throw new Error(result.message || "Visualization failed");
                 }
             } catch (error) {
+                showError(error.message);
             } finally {
                 visualizeBtn.disabled = false;
+                visualizeBtn.textContent = "Generate Visualization";
             }
+        });
+        // Update functionality
+        updateBtn.addEventListener('click', async () => {
+            const title = document.getElementById('chart-title').value;
+            if (!title) {
+                showError("Please enter a chart title");
                 return;
             }
+            // Here you would typically send the update request to your backend
+            // For now we'll just update the title in the image (mock implementation)
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const img = new Image();
+            img.onload = function() {
+                canvas.width = img.width;
+                canvas.height = img.height + 40;
+                ctx.fillStyle = 'white';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 40);
+                ctx.fillStyle = 'black';
+                ctx.font = '20px Arial';
+                ctx.textAlign = 'center';
+                ctx.fillText(title, canvas.width/2, 30);
+                resultImage.src = canvas.toDataURL();
+            };
+            img.src = resultImage.src;
+        });
         function showError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
         function hideError() {