Hugging Face's logo

Spaces:
vipra
/
ai-data-analyst-pingax
Running

App Files Community
ai-data-analyst-pingax / index.html
vipra's picture
vipra
Add 2 files
05a6ccd verified
raw
history blame contribute delete
44.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AI Data Analyst | Interactive Notebook</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
 }
 .sidebar-item:hover {
 background-color: rgba(255, 255, 255, 0.1);
 transform: translateX(5px);
 }
 .code-cell {
 border-left: 4px solid #6e8efb;
 transition: all 0.3s ease;
 }
 .code-cell:hover {
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .output-cell {
 background-color: #f8f9fa;
 border-left: 4px solid #4fd1c5;
 }
 .cm-editor {
 height: auto;
 font-size: 14px;
 line-height: 1.5;
 }
 .cm-gutters {
 background-color: #f8f9fa !important;
 }
 .cm-activeLineGutter {
 background-color: #e9ecef !important;
 }
 .cm-activeLine {
 background-color: #f1f3f5 !important;
 }
 .prompt-input:focus {
 outline: none;
 box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.5);
 }
 .notebook-container {
 scroll-behavior: smooth;
 }
 .cell-toolbar {
 opacity: 0;
 transition: opacity 0.2s ease;
 }
 .code-cell:hover .cell-toolbar {
 opacity: 1;
 }
 .fade-in {
 animation: fadeIn 0.3s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="gradient-bg text-white w-64 flex-shrink-0 hidden md:flex flex-col">
 <div class="p-4 flex items-center space-x-3">
 <i class="fas fa-brain text-2xl"></i>
 <h1 class="text-xl font-bold">AI Data Analyst</h1>
 </div>
 <div class="flex-1 overflow-y-auto">
 <div class="p-4">
 <div class="mb-6">
 <h2 class="text-sm uppercase font-semibold mb-2 opacity-70">Main</h2>
 <div class="space-y-1">
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200">
 <i class="fas fa-tachometer-alt"></i>
 <span>Dashboard</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200 bg-white bg-opacity-10">
 <i class="fas fa-book"></i>
 <span>Notebooks</span>
 </a>
 </div>
 </div>
<div class="mb-6">
 <h2 class="text-sm uppercase font-semibold mb-2 opacity-70">Analysis Tools</h2>
 <div class="space-y-1">
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200" onclick="showTool('visualization')">
 <i class="fas fa-chart-line"></i>
 <span>Charts & Graphs</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200" onclick="showTool('manipulation')">
 <i class="fas fa-filter"></i>
 <span>Data Manipulation</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200" onclick="showTool('insights')">
 <i class="fas fa-lightbulb"></i>
 <span>Insights</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200" onclick="showTool('science')">
 <i class="fas fa-flask"></i>
 <span>Data Science</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200" onclick="showTool('reports')">
 <i class="fas fa-file-alt"></i>
 <span>Reports</span>
 </a>
 </div>
 </div>
<div class="mb-6">
 <h2 class="text-sm uppercase font-semibold mb-2 opacity-70">Datasets</h2>
 <div class="space-y-1">
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200">
 <i class="fas fa-database"></i>
 <span>Browse Data</span>
 </a>
 <a href="#" class="sidebar-item flex items-center space-x-3 p-2 rounded-lg transition-all duration-200">
 <i class="fas fa-upload"></i>
 <span>Upload Data</span>
 </a>
 </div>
 </div>
 </div>
 </div>
 <div class="p-4 border-t border-white border-opacity-10">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
 <i class="fas fa-user"></i>
 </div>
 <div>
 <div class="font-medium">John Doe</div>
 <div class="text-xs opacity-70">Admin</div>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Top Navigation -->
 <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
 <div class="flex items-center space-x-4">
 <button class="md:hidden text-gray-600">
 <i class="fas fa-bars"></i>
 </button>
 <h1 class="text-xl font-bold text-gray-800">Interactive Analysis Notebook</h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="flex space-x-2">
 <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center space-x-2">
 <i class="fas fa-save text-gray-600"></i>
 <span>Save</span>
 </button>
 <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center space-x-2">
 <i class="fas fa-play"></i>
 <span>Run All</span>
 </button>
 <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center space-x-2">
 <i class="fas fa-file-export text-gray-600"></i>
 <span>Export</span>
 </button>
 </div>
 </div>
 </header>
<!-- Tool Selection Panel -->
 <div id="toolPanel" class="bg-white border-b border-gray-200 p-4 hidden">
 <div class="flex items-center justify-between">
 <h2 class="font-medium" id="toolTitle">Tool</h2>
 <button onclick="hideToolPanel()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div id="toolContent" class="mt-3">
 <!-- Tool content will be loaded here -->
 </div>
 </div>
<!-- Notebook Container -->
 <main class="flex-1 overflow-y-auto notebook-container bg-white p-4" id="notebookContainer">
 <!-- Welcome Cell -->
 <div class="mb-6 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
 <h2 class="text-lg font-bold text-blue-800 mb-2">Welcome to your Interactive Analysis Notebook!</h2>
 <p class="text-blue-700">This notebook combines the power of Python with AI assistance. You can write code directly or describe what you want in plain English and let the AI generate the code for you.</p>
 </div>
<!-- Sample Data Load Cell -->
 <div class="code-cell bg-white rounded-lg mb-4 border border-gray-200 overflow-hidden">
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Run cell">
 <i class="fas fa-play"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Add cell below">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Move cell up">
 <i class="fas fa-arrow-up"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Move cell down">
 <i class="fas fa-arrow-down"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Delete cell">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 <div class="px-4 py-3">
 <div class="font-mono text-sm bg-gray-800 text-gray-100 p-3 rounded-lg overflow-x-auto">
 <span class="text-green-400"># Sample data loading</span><br>
 <span class="text-blue-400">import</span> pandas <span class="text-blue-400">as</span> pd<br>
 <span class="text-blue-400">import</span> numpy <span class="text-blue-400">as</span> np<br><br>
 <span class="text-green-400"># Load sample sales data</span><br>
 df = pd.read_csv(<span class="text-yellow-300">'sample_sales_data.csv'</span>)<br>
 df.head()
 </div>
 </div>
 </div>
<!-- Output Cell -->
 <div class="output-cell rounded-lg mb-6 border border-gray-200 overflow-hidden fade-in">
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <span class="text-xs font-mono text-gray-500">Out[1]</span>
 <button class="text-gray-500 hover:text-gray-700" title="Clear output">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="px-4 py-3 overflow-x-auto">
 <table class="min-w-full border border-gray-200 text-sm">
 <thead class="bg-gray-100">
 <tr>
 <th class="border px-2 py-1">Order ID</th>
 <th class="border px-2 py-1">Product</th>
 <th class="border px-2 py-1">Category</th>
 <th class="border px-2 py-1">Quantity</th>
 <th class="border px-2 py-1">Price</th>
 <th class="border px-2 py-1">Order Date</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="border px-2 py-1">1001</td>
 <td class="border px-2 py-1">Ultra HD TV</td>
 <td class="border px-2 py-1">Electronics</td>
 <td class="border px-2 py-1">1</td>
 <td class="border px-2 py-1">899.99</td>
 <td class="border px-2 py-1">2023-01-15</td>
 </tr>
 <tr>
 <td class="border px-2 py-1">1002</td>
 <td class="border px-2 py-1">Wireless Headphones</td>
 <td class="border px-2 py-1">Electronics</td>
 <td class="border px-2 py-1">2</td>
 <td class="border px-2 py-1">129.99</td>
 <td class="border px-2 py-1">2023-01-16</td>
 </tr>
 <tr>
 <td class="border px-2 py-1">1003</td>
 <td class="border px-2 py-1">Coffee Maker</td>
 <td class="border px-2 py-1">Appliances</td>
 <td class="border px-2 py-1">1</td>
 <td class="border px-2 py-1">49.99</td>
 <td class="border px-2 py-1">2023-01-17</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
<!-- Prompt Cell -->
 <div class="code-cell bg-white rounded-lg mb-4 border border-gray-200 overflow-hidden">
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <div class="flex space-x-2">
 <span class="text-xs font-mono text-gray-500">In [ ]:</span>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Move cell up">
 <i class="fas fa-arrow-up"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Move cell down">
 <i class="fas fa-arrow-down"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Delete cell">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 <div class="px-4 py-3">
 <div class="flex items-start">
 <div class="mr-3 text-purple-600">
 <i class="fas fa-robot"></i>
 </div>
 <div class="flex-1">
 <textarea class="prompt-input w-full p-2 border border-gray-300 rounded-lg focus:border-purple-500" rows="2" placeholder="Describe what you want to do with the data (e.g., 'Show me a bar chart of sales by category')"></textarea>
 <div class="mt-2 flex justify-end space-x-2">
 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
 Clear
 </button>
 <button class="px-3 py-1 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center space-x-1">
 <i class="fas fa-magic"></i>
 <span>Generate Code</span>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Generated Code Cell -->
 <div class="code-cell bg-white rounded-lg mb-4 border border-gray-200 overflow-hidden">
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Run cell">
 <i class="fas fa-play"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Add cell below">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Move cell up">
 <i class="fas fa-arrow-up"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Move cell down">
 <i class="fas fa-arrow-down"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Delete cell">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 <div class="px-4 py-3">
 <div class="font-mono text-sm bg-gray-800 text-gray-100 p-3 rounded-lg overflow-x-auto">
 <span class="text-green-400"># Generated code: Bar chart of sales by category</span><br>
 <span class="text-blue-400">import</span> matplotlib.pyplot <span class="text-blue-400">as</span> plt<br>
 <span class="text-blue-400">import</span> seaborn <span class="text-blue-400">as</span> sns<br><br>
 <span class="text-green-400"># Group by category and sum the sales</span><br>
 sales_by_category = df.groupby(<span class="text-yellow-300">'Category'</span>)[<span class="text-yellow-300">'Price'</span>].sum().reset_index()<br><br>
 <span class="text-green-400"># Create bar plot</span><br>
 plt.figure(figsize=(<span class="text-yellow-300">10, 6</span>))<br>
 sns.barplot(x=<span class="text-yellow-300">'Category'</span>, y=<span class="text-yellow-300">'Price'</span>, data=sales_by_category)<br>
 plt.title(<span class="text-yellow-300">'Total Sales by Product Category'</span>)<br>
 plt.ylabel(<span class="text-yellow-300">'Total Sales ($)'</span>)<br>
 plt.xticks(rotation=<span class="text-yellow-300">45</span>)<br>
 plt.show()
 </div>
 </div>
 </div>
<!-- Visualization Output Cell -->
 <div class="output-cell rounded-lg mb-6 border border-gray-200 overflow-hidden fade-in">
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <span class="text-xs font-mono text-gray-500">Out[2]</span>
 <button class="text-gray-500 hover:text-gray-700" title="Clear output">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="px-4 py-3">
 <div class="h-64">
 <canvas id="notebookChart"></canvas>
 </div>
 </div>
 </div>
<!-- Add New Cell Button -->
 <div class="flex justify-center mb-6">
 <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 flex items-center space-x-2" onclick="addNewCell()">
 <i class="fas fa-plus"></i>
 <span>Add New Cell</span>
 </button>
 </div>
 </main>
 </div>
 </div>
<script>
 // Show/hide tool panel
 function showTool(tool) {
 const panel = document.getElementById('toolPanel');
 const title = document.getElementById('toolTitle');
 const content = document.getElementById('toolContent');
// Set title based on tool
 switch(tool) {
 case 'visualization':
 title.textContent = 'Charts & Graphs';
 content.innerHTML = `
 <div class="grid grid-cols-2 gap-4">
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-500" onclick="insertCode('bar')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-bar text-purple-600"></i>
 <span>Bar Chart</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500" onclick="insertCode('line')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-line text-blue-600"></i>
 <span>Line Chart</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-green-500" onclick="insertCode('pie')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-pie text-green-600"></i>
 <span>Pie Chart</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-yellow-500" onclick="insertCode('scatter')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-scatter text-yellow-600"></i>
 <span>Scatter Plot</span>
 </div>
 </div>
 </div>
 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">Custom Visualization Prompt:</label>
 <div class="flex space-x-2">
 <input type="text" id="vizPrompt" placeholder="E.g., 'Create a heatmap of correlation matrix'" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
 <button class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="generateFromPrompt('vizPrompt')">
 Generate
 </button>
 </div>
 </div>
 `;
 break;
 case 'manipulation':
 title.textContent = 'Data Manipulation';
 content.innerHTML = `
 <div class="grid grid-cols-2 gap-4">
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-500" onclick="insertCode('clean')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-broom text-purple-600"></i>
 <span>Clean Data</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500" onclick="insertCode('filter')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-filter text-blue-600"></i>
 <span>Filter Data</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-green-500" onclick="insertCode('group')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-layer-group text-green-600"></i>
 <span>Group Data</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-yellow-500" onclick="insertCode('transform')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-exchange-alt text-yellow-600"></i>
 <span>Transform Data</span>
 </div>
 </div>
 </div>
 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">Custom Data Operation:</label>
 <div class="flex space-x-2">
 <input type="text" id="dataPrompt" placeholder="E.g., 'Remove rows with missing values in price column'" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
 <button class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="generateFromPrompt('dataPrompt')">
 Generate
 </button>
 </div>
 </div>
 `;
 break;
 case 'insights':
 title.textContent = 'Data Insights';
 content.innerHTML = `
 <div class="grid grid-cols-2 gap-4">
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-500" onclick="insertCode('stats')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-calculator text-purple-600"></i>
 <span>Descriptive Stats</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500" onclick="insertCode('corr')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-project-diagram text-blue-600"></i>
 <span>Correlations</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-green-500" onclick="insertCode('outliers')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-exclamation-triangle text-green-600"></i>
 <span>Find Outliers</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-yellow-500" onclick="insertCode('trends')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-line text-yellow-600"></i>
 <span>Identify Trends</span>
 </div>
 </div>
 </div>
 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">Ask a Question:</label>
 <div class="flex space-x-2">
 <input type="text" id="insightPrompt" placeholder="E.g., 'What factors affect customer satisfaction?'" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
 <button class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="generateFromPrompt('insightPrompt')">
 Analyze
 </button>
 </div>
 </div>
 `;
 break;
 case 'science':
 title.textContent = 'Data Science';
 content.innerHTML = `
 <div class="grid grid-cols-2 gap-4">
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-500" onclick="insertCode('forecast')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-line text-purple-600"></i>
 <span>Forecasting</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500" onclick="insertCode('classify')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-tags text-blue-600"></i>
 <span>Classification</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-green-500" onclick="insertCode('regress')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-chart-area text-green-600"></i>
 <span>Regression</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-yellow-500" onclick="insertCode('cluster')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-object-group text-yellow-600"></i>
 <span>Clustering</span>
 </div>
 </div>
 </div>
 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">Model Configuration:</label>
 <div class="flex space-x-2">
 <input type="text" id="modelPrompt" placeholder="E.g., 'Predict sales based on marketing spend'" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
 <button class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="generateFromPrompt('modelPrompt')">
 Build
 </button>
 </div>
 </div>
 `;
 break;
 case 'reports':
 title.textContent = 'Reports';
 content.innerHTML = `
 <div class="grid grid-cols-2 gap-4">
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-500" onclick="insertCode('summary')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-file-alt text-purple-600"></i>
 <span>Summary Report</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500" onclick="insertCode('export')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-file-excel text-blue-600"></i>
 <span>Export Data</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-green-500" onclick="insertCode('presentation')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-file-powerpoint text-green-600"></i>
 <span>Presentation</span>
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:border-yellow-500" onclick="insertCode('dashboard')">
 <div class="flex items-center space-x-2">
 <i class="fas fa-tachometer-alt text-yellow-600"></i>
 <span>Dashboard</span>
 </div>
 </div>
 </div>
 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">Custom Report:</label>
 <div class="flex space-x-2">
 <input type="text" id="reportPrompt" placeholder="E.g., 'Create a quarterly performance report with charts'" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
 <button class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="generateFromPrompt('reportPrompt')">
 Generate
 </button>
 </div>
 </div>
 `;
 break;
 }
panel.classList.remove('hidden');
 }
 function hideToolPanel() {
 document.getElementById('toolPanel').classList.add('hidden');
 }
 // Insert code template based on selection
 function insertCode(type) {
 let code = '';
switch(type) {
 case 'bar':
 code = `# Create bar chart
import matplotlib.pyplot as plt
import seaborn as sns
# Group data and create plot
plt.figure(figsize=(10, 6))
sns.barplot(x='Category', y='Price', data=df)
plt.title('Bar Chart of Price by Category')
plt.ylabel('Price ($)')
plt.xticks(rotation=45)
plt.show()`;
 break;
 case 'line':
 code = `# Create line chart
import matplotlib.pyplot as plt
import seaborn as sns
# Convert date column if needed
# df['Date'] = pd.to_datetime(df['Date'])
plt.figure(figsize=(10, 6))
sns.lineplot(x='Date', y='Value', data=df)
plt.title('Trend Over Time')
plt.ylabel('Value')
plt.xticks(rotation=45)
plt.show()`;
 break;
 case 'clean':
 code = `# Clean data
# Remove duplicates
df = df.drop_duplicates()
# Handle missing values
df = df.dropna() # or df.fillna(value)
# Convert data types if needed
# df['Column'] = df['Column'].astype('category')`;
 break;
 case 'stats':
 code = `# Descriptive statistics
print(df.describe())
# For categorical data
print(df.describe(include=['object']))`;
 break;
 case 'forecast':
 code = `# Time series forecasting
from statsmodels.tsa.arima.model import ARIMA
from sklearn.metrics import mean_squared_error
# Prepare data (ensure it has a datetime index)
# df = df.set_index('Date')
# Fit model
model = ARIMA(df['Value'], order=(5,1,0))
model_fit = model.fit()
# Forecast
forecast = model_fit.forecast(steps=12)`;
 break;
 case 'summary':
 code = `# Generate summary report
from IPython.display import HTML
# Create summary statistics
summary = df.describe().to_html()
# Display in notebook
HTML(f'''
<h2>Data Summary Report</h2>
<h3>Dataset Overview</h3>
<p>Total rows: {len(df)}</p>
<p>Columns: {', '.join(df.columns)}</p>
<h3>Statistics</h3>
{summary}
''')`;
 break;
 }
// In a real app, this would insert the code into a new cell
 alert(`Code template for ${type} would be inserted into a new cell:\n\n${code}`);
 hideToolPanel();
 }
 // Generate code from prompt
 function generateFromPrompt(promptId) {
 const prompt = document.getElementById(promptId).value;
 if (!prompt) return;
// In a real app, this would call an API to generate code
 alert(`Generating code for: "${prompt}"\n\nThis would connect to an AI service in a real application.`);
 hideToolPanel();
 }
 // Add new cell
 function addNewCell() {
 const container = document.getElementById('notebookContainer');
 const newCell = document.createElement('div');
 newCell.className = 'code-cell bg-white rounded-lg mb-4 border border-gray-200 overflow-hidden fade-in';
 newCell.innerHTML = `
 <div class="cell-toolbar bg-gray-50 px-3 py-1 flex justify-between items-center">
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Run cell">
 <i class="fas fa-play"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Add cell below">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-500 hover:text-gray-700" title="Move cell up">
 <i class="fas fa-arrow-up"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Move cell down">
 <i class="fas fa-arrow-down"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700" title="Delete cell">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 <div class="px-4 py-3">
 <div class="font-mono text-sm bg-gray-800 text-gray-100 p-3 rounded-lg">
 <span class="text-green-400"># Enter your Python code here</span><br>
 <span class="text-blue-400">import</span> pandas <span class="text-blue-400">as</span> pd<br>
 <span class="text-blue-400">import</span> numpy <span class="text-blue-400">as</span> np
 </div>
 </div>
 `;
// Insert before the "Add New Cell" button
 const addButton = document.querySelector('#notebookContainer > div.flex.justify-center.mb-6');
 container.insertBefore(newCell, addButton);
// Scroll to the new cell
 newCell.scrollIntoView({ behavior: 'smooth' });
 }
 // Initialize notebook chart
 document.addEventListener('DOMContentLoaded', function() {
 const ctx = document.getElementById('notebookChart').getContext('2d');
 const chart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: ['Electronics', 'Appliances', 'Fitness', 'Home', 'Beauty'],
 datasets: [{
 label: 'Total Sales',
 data: [42000, 32000, 28000, 24000, 18000],
 backgroundColor: [
 'rgba(110, 142, 251, 0.7)',
 'rgba(167, 119, 227, 0.7)',
 'rgba(79, 209, 197, 0.7)',
 'rgba(254, 178, 54, 0.7)',
 'rgba(255, 107, 107, 0.7)'
 ],
 borderColor: [
 'rgba(110, 142, 251, 1)',
 'rgba(167, 119, 227, 1)',
 'rgba(79, 209, 197, 1)',
 'rgba(254, 178, 54, 1)',
 'rgba(255, 107, 107, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 grid: {
 drawBorder: false
 }
 },
 x: {
 grid: {
 display: false
 }
 }
 }
 }
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vipra/ai-data-analyst-pingax" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>