Upload 23 files

README.md

@@ -1,11 +1,36 @@
----
-title: Sql Agent
-emoji: 💻
-colorFrom: green
-colorTo: red
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "text-to-sql",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/inference": "^2.8.1",
+    "@langchain/community": "^0.0.31",
+    "@langchain/openai": "^0.0.14",
+    "@tabler/icons-react": "^3.22.0",
+    "chart.js": "^4.4.6",
+    "framer-motion": "^11.11.17",
+    "langchain": "^0.1.37",
+    "mysql2": "^3.11.4",
+    "next": "15.0.3",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/components/AIVisualization.tsx

@@ -0,0 +1,69 @@
+import { Bar, Pie, Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+interface AIVisualizationProps {
+  visualization: {
+    type: 'bar' | 'pie' | 'line' | 'doughnut';
+    config: any;
+  };
+}
+
+export default function AIVisualization({ visualization }: AIVisualizationProps) {
+  const ChartComponent = {
+    bar: Bar,
+    pie: Pie,
+    line: Line,
+    doughnut: Pie  
+  }[visualization.type];
+
+  if (!ChartComponent) return null;
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+      },
+      title: {
+        display: true,
+        text: 'Data Visualization'
+      }
+    },
+    ...(visualization.type === 'doughnut' && {
+      cutout: '50%' 
+    })
+  };
+
+  return (
+    <div className="w-full h-[400px]">
+      <ChartComponent
+        data={visualization.config}
+        options={options}
+      />
+    </div>
+  );
+} 

src/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../styles/globals.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+} 

src/pages/api/sql.ts

@@ -0,0 +1,236 @@
+import { HfInference } from "@huggingface/inference";
+import { NextApiRequest, NextApiResponse } from "next";
+import { createConnection, executeQuery } from "@/utils/database";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  const { dbUri, userPrompt } = req.body;
+
+  if (!dbUri || !userPrompt) {
+    return res.status(400).json({ 
+      message: "Missing required fields", 
+      details: {
+        dbUri: !dbUri ? "Database URI is required" : null,
+        userPrompt: !userPrompt ? "Query prompt is required" : null
+      }
+    });
+  }
+
+  try {
+    const apiKey = process.env.HUGGINGFACE_API_KEY;
+    if (!apiKey) {
+      return res.status(500).json({ 
+        message: "Server configuration error", 
+        details: "API key is not configured"
+      });
+    }
+
+    let hf;
+    try {
+      hf = new HfInference(apiKey);
+    } catch (error: any) {
+      return res.status(500).json({ 
+        message: "Failed to initialize AI model",
+        details: error.message
+      });
+    }
+
+    let response;
+    const prompt = `You are a SQL expert. Convert the following text to a SQL query.
+Rules:
+- Return a JSON object with exactly this format: {"query": "YOUR SQL QUERY HERE", "chartType": "CHART TYPE HERE"}
+- For chartType use one of: "bar", "pie", "line", "doughnut", or null
+- The query should be safe and only return the requested data
+- Keep table names exactly as provided
+- Do not include any explanations or comments
+
+Example input: "Show me sales data as a pie chart"
+Example output: {"query": "SELECT * FROM sales LIMIT 10", "chartType": "pie"}
+
+Text: ${userPrompt}`;
+
+    try {
+      response = await hf.chatCompletion({
+        model: "nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
+        messages: [{ role: "user", content: prompt }],
+        temperature: 0.1,
+        max_tokens: 500,
+      });
+      console.log(response);
+    } catch (error: any) {
+      console.log(error);
+      return res.status(500).json({ 
+        message: "AI model error",
+        details: error.message || "Failed to generate SQL query"
+      });
+    }
+
+    let sqlQuery = '';
+    let requestedChartType = null;
+    try {
+      const content = response?.choices?.[0]?.message?.content?.trim() || '';
+      
+      const jsonMatch = content.match(/\{.*\}/s);
+      if (jsonMatch) {
+        const parsedResponse = JSON.parse(jsonMatch[0]);
+        sqlQuery = parsedResponse.query?.trim();
+        requestedChartType = parsedResponse.chartType;
+      } else {
+        sqlQuery = content
+          .replace(/```sql/gi, '')
+          .replace(/```/gi, '')
+          .replace(/sql query:?\s*/gi, '')
+          .replace(/query:?\s*/gi, '')
+          .trim();
+      }
+
+      if (!sqlQuery) {
+        throw new Error('No valid SQL query found in response');
+      }
+    } catch (error: any) {
+      return res.status(500).json({ 
+        message: "Failed to parse AI response",
+        details: error.message
+      });
+    }
+
+    let connection;
+    try {
+      connection = await createConnection(dbUri);
+    } catch (error: any) {
+      return res.status(500).json({ 
+        message: "Database connection error",
+        details: error.message
+      });
+    }
+
+    try {
+      const results = await executeQuery(connection, sqlQuery || '');
+      
+      let visualization = null;
+      if (Array.isArray(results) && results.length > 0) {
+        const firstRow = results[0];
+        const columns = Object.keys(firstRow);
+        
+        const dataAnalysis = {
+          totalColumns: columns.length,
+          numericColumns: columns.filter(col => 
+            typeof firstRow[col] === 'number' && 
+            !col.toLowerCase().includes('id') && 
+            !col.toLowerCase().includes('_id')
+          ),
+          dateColumns: columns.filter(col => firstRow[col] instanceof Date),
+          stringColumns: columns.filter(col => 
+            typeof firstRow[col] === 'string' ||
+            col.toLowerCase().includes('name') ||
+            col.toLowerCase().includes('title')
+          ),
+          rowCount: results.length
+        };
+
+        if (requestedChartType === 'pie' || requestedChartType === 'doughnut') {
+          const preferredNumericColumns = dataAnalysis.numericColumns.filter(col => 
+            col.toLowerCase().includes('status') ||
+            col.toLowerCase().includes('count') ||
+            col.toLowerCase().includes('amount') ||
+            col.toLowerCase().includes('total')
+          );
+          
+          if (preferredNumericColumns.length > 0) {
+            dataAnalysis.numericColumns = preferredNumericColumns;
+          }
+        }
+
+        if (requestedChartType) {
+          switch (requestedChartType) {
+            case 'pie':
+            case 'doughnut':
+              if (dataAnalysis.numericColumns.length > 0) {
+                visualization = {
+                  type: requestedChartType,
+                  config: {
+                    labels: results.map(row => 
+                      dataAnalysis.stringColumns[0] 
+                        ? String(row[dataAnalysis.stringColumns[0]]) 
+                        : `Row ${results.indexOf(row) + 1}`
+                    ),
+                    datasets: [{
+                      data: results.map(row => row[dataAnalysis.numericColumns[0]]),
+                      backgroundColor: results.map(() => 
+                        `hsla(${Math.random() * 360}, 70%, 50%, 0.6)`
+                      )
+                    }]
+                  }
+                };
+              }
+              break;
+
+            case 'line':
+              if (dataAnalysis.dateColumns.length > 0 || dataAnalysis.numericColumns.length > 0) {
+                visualization = {
+                  type: 'line',
+                  config: {
+                    labels: dataAnalysis.dateColumns.length > 0 
+                      ? results.map(row => new Date(row[dataAnalysis.dateColumns[0]]).toLocaleDateString())
+                      : results.map((_, idx) => `Point ${idx + 1}`),
+                    datasets: dataAnalysis.numericColumns.map(col => ({
+                      label: col,
+                      data: results.map(row => row[col]),
+                      borderColor: `hsl(${Math.random() * 360}, 70%, 50%)`,
+                      tension: 0.1
+                    }))
+                  }
+                };
+              }
+              break;
+
+            case 'bar':
+            default:
+              visualization = {
+                type: 'bar',
+                config: {
+                  labels: dataAnalysis.stringColumns.length > 0
+                    ? results.map(row => String(row[dataAnalysis.stringColumns[0]]))
+                    : results.map((_, idx) => `Row ${idx + 1}`),
+                  datasets: dataAnalysis.numericColumns.map(col => ({
+                    label: col,
+                    data: results.map(row => row[col]),
+                    backgroundColor: `hsla(${Math.random() * 360}, 70%, 50%, 0.6)`,
+                    borderColor: `hsl(${Math.random() * 360}, 70%, 50%)`,
+                    borderWidth: 1
+                  }))
+                }
+              };
+              break;
+          }
+        }
+      }
+
+      await connection.end();
+      return res.status(200).json({ 
+        results, 
+        query: sqlQuery,
+        visualization 
+      });
+    } catch (error: any) {
+      await connection?.end();
+      return res.status(500).json({ 
+        message: "Query execution error",
+        details: error.message
+      });
+    }
+
+  } catch (error: any) {
+    console.error('Unexpected API Error:', error);
+    return res.status(500).json({ 
+      message: "Unexpected error occurred", 
+      details: error.message || "Unknown error"
+    });
+  }
+}

src/pages/api/tables.ts

@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { createConnection, getTables } from "@/utils/database";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  const { dbUri } = req.body;
+
+  if (!dbUri) {
+    return res.status(400).json({ 
+      message: "Database URI is required"
+    });
+  }
+
+  let connection;
+  try {
+    connection = await createConnection(dbUri);
+    const tables = await getTables(connection);
+    await connection.end();
+    return res.status(200).json({ tables });
+  } catch (error: any) {
+    await connection?.end();
+    return res.status(500).json({ 
+      message: "Failed to fetch tables",
+      details: error.message 
+    });
+  }
+} 

src/pages/index.tsx

@@ -0,0 +1,349 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { IconDatabase, IconBrandMysql, IconArrowRight, IconLoader2, IconAlertCircle, IconRefresh } from '@tabler/icons-react';
+import AIVisualization from '../components/AIVisualization';
+
+interface QueryResults {
+  results: any;
+  query: string;
+  visualization?: {
+    type: 'bar' | 'pie' | 'line';
+    config: any;
+  };
+}
+
+interface ApiError {
+  message: string;
+  details?: string | Record<string, string | null>;
+}
+
+export default function Home() {
+  const [dbConfig, setDbConfig] = useState({
+    host: '',
+    port: '3306',
+    database: '',
+    username: '',
+    password: ''
+  });
+  const [tables, setTables] = useState<string[]>([]);
+  const [selectedTable, setSelectedTable] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [results, setResults] = useState<QueryResults | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<ApiError | null>(null);
+
+  const [dbUri, setDbUri] = useState('');
+  const [showDbConfig, setShowDbConfig] = useState(false);
+
+  useEffect(() => {
+    const uri = `mysql://${dbConfig.username}:${dbConfig.password}@${dbConfig.host}:${dbConfig.port}/${dbConfig.database}`;
+    setDbUri(uri);
+  }, [dbConfig]);
+
+  const fetchTables = async () => {
+    if (!dbUri) return;
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/tables', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dbUri }),
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.message);
+      }
+      
+      setTables(data.tables);
+    } catch (err: any) {
+      setError({
+        message: 'Failed to fetch tables',
+        details: err.message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!selectedTable) {
+      setError({
+        message: "Table selection required",
+        details: "Please select a table before submitting the query"
+      });
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setResults(null);
+
+    try {
+      const response = await fetch('/api/sql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          dbUri, 
+          userPrompt: `${prompt} from table ${selectedTable}` 
+        }),
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw {
+          message: data.message || 'An error occurred',
+          details: data.details
+        };
+      }
+      
+      setResults(data);
+    } catch (err: any) {
+      setError({
+        message: err.message || 'Failed to process request',
+        details: err.details
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-12 max-w-4xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-12"
+        >
+          <div className="flex items-center justify-center gap-3 mb-4">
+            <IconBrandMysql className="w-10 h-10 text-blue-500" />
+            <IconArrowRight className="w-6 h-6 text-gray-400" />
+            <IconDatabase className="w-10 h-10 text-blue-500" />
+          </div>
+          <h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-4">
+            Text to SQL Converter
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            Transform natural language into SQL queries using AI
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 mb-8"
+        >
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4"
+              >
+                <div className="flex items-center gap-2 text-red-800 dark:text-red-200">
+                  <IconAlertCircle className="w-5 h-5" />
+                  <p className="font-medium">{error.message}</p>
+                </div>
+                {error.details && (
+                  <p className="mt-2 text-sm text-red-600 dark:text-red-300">
+                    {typeof error.details === 'string' 
+                      ? error.details 
+                      : Object.entries(error.details)
+                          .filter(([_, value]) => value)
+                          .map(([_, value]) => value)
+                          .join(', ')}
+                  </p>
+                )}
+              </motion.div>
+            )}
+
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-200">
+                  Database Connection
+                </label>
+                <button
+                  type="button"
+                  onClick={() => setShowDbConfig(!showDbConfig)}
+                  className="flex items-center gap-2 text-sm text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+                >
+                  {showDbConfig ? (
+                    <>Hide Connection Details <IconArrowRight className="w-4 h-4 rotate-90" /></>
+                  ) : (
+                    <>Show Connection Details <IconArrowRight className="w-4 h-4 -rotate-90" /></>
+                  )}
+                </button>
+              </div>
+              
+              <AnimatePresence>
+                {showDbConfig && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <input
+                          type="text"
+                          value={dbConfig.host}
+                          onChange={(e) => setDbConfig(prev => ({ ...prev, host: e.target.value }))}
+                          className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                          placeholder="Server Host"
+                        />
+                      </div>
+                      <div>
+                        <input
+                          type="text"
+                          value={dbConfig.port}
+                          onChange={(e) => setDbConfig(prev => ({ ...prev, port: e.target.value }))}
+                          className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                          placeholder="Port"
+                        />
+                      </div>
+                      <div>
+                        <input
+                          type="text"
+                          value={dbConfig.database}
+                          onChange={(e) => setDbConfig(prev => ({ ...prev, database: e.target.value }))}
+                          className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                          placeholder="Database Name"
+                        />
+                      </div>
+                      <div>
+                        <input
+                          type="text"
+                          value={dbConfig.username}
+                          onChange={(e) => setDbConfig(prev => ({ ...prev, username: e.target.value }))}
+                          className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                          placeholder="Username"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <input
+                          type="password"
+                          value={dbConfig.password}
+                          onChange={(e) => setDbConfig(prev => ({ ...prev, password: e.target.value }))}
+                          className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                          placeholder="Password"
+                        />
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+                Select Table
+              </label>
+              <div className="flex gap-4">
+                <select
+                  value={selectedTable}
+                  onChange={(e) => setSelectedTable(e.target.value)}
+                  className="flex-1 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                  disabled={tables.length === 0}
+                >
+                  <option value="">Select a table</option>
+                  {tables.map((table) => (
+                    <option key={table} value={table}>
+                      {table}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  onClick={fetchTables}
+                  disabled={!dbUri || loading}
+                  className="px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all disabled:opacity-50"
+                >
+                  {loading ? (
+                    <IconLoader2 className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <IconRefresh className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+                Your Query
+              </label>
+              <textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                rows={4}
+                className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all"
+                placeholder="Example: Show me the first 5 users from the users table"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+              {loading ? (
+                <>
+                  <IconLoader2 className="w-5 h-5 animate-spin" />
+                  Converting...
+                </>
+              ) : (
+                'Convert to SQL'
+              )}
+            </button>
+          </form>
+        </motion.div>
+
+        {results && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-white mb-4">
+              Generated SQL & Results
+            </h2>
+            <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-4">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
+                SQL Query
+              </h3>
+              <pre className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
+                {results.query}
+              </pre>
+            </div>
+            <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
+                Query Results
+              </h3>
+              <pre className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
+                {JSON.stringify(results.results, null, 2)}
+              </pre>
+            </div>
+            {results?.visualization && (
+              <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mt-4">
+                <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 mb-4">
+                  AI Generated Visualization
+                </h3>
+                <AIVisualization visualization={results.visualization} />
+              </div>
+            )}
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}

src/styles/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/utils/database.ts

@@ -0,0 +1,37 @@
+import mysql from 'mysql2/promise';
+
+export async function createConnection(uri: string) {
+  try {
+    const connection = await mysql.createConnection(uri);
+    return connection;
+  } catch (error) {
+    throw new Error('Failed to connect to database');
+  }
+}
+
+export async function executeQuery(connection: mysql.Connection, query: string) {
+  try {
+    const [rows] = await connection.execute(query);
+    return rows;
+  } catch (error) {
+    throw new Error(`Failed to execute query: ${error}`);
+  }
+}
+
+export async function getTables(connection: mysql.Connection) {
+  try {
+    const [rows] = await connection.execute('SHOW TABLES');
+    return Object.values(rows).map((row: any) => Object.values(row)[0]);
+  } catch (error) {
+    throw new Error('Failed to fetch tables');
+  }
+}
+
+export async function getTablesList(connection: mysql.Connection) {
+  try {
+    const [rows] = await connection.execute('SHOW TABLES');
+    return Object.values(rows).map((row: any) => Object.values(row)[0]);
+  } catch (error) {
+    throw new Error('Failed to fetch tables list');
+  }
+}

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}