This project demonstrates a web application that uses a Large Language Model (LLM) to generate data visualizations based on user-provided data and context. The application takes data (JSON or CSV), interprets context instructions, and dynamically creates interactive charts using Chart.js.

• Data Input: Accepts JSON or CSV data via text input or file upload.
• Contextual Instructions: Users provide context to guide the LLM in generating chart types and styles.
• LLM Integration: Utilizes the Google Gemini API for chart code generation.
• Dynamic Charting: Creates interactive charts with Chart.js.
• Model Selection: Allows you to choose between various Gemini models.
• Refresh Functionality: Allows you to refresh the chart and get a different visualization. (In Progress)
• Responsive Design: Adapts to different screen sizes using scalable CSS units.
• Robust Error Handling: Provides informative feedback in case of errors.

1. Navigate to the Application: Open your browser and navigate to the deployed application URL.
2. Enter or Upload Data: Paste your JSON or CSV data into the designated text area or upload a file (JSON or CSV). Make sure that your CSV file is properly formatted (escaped quotes for inner quotes).
3. Provide Context (Optional): Specify your desired chart type, style, or any particular elements to highlight. The more descriptive you are, the better the LLM can understand your preferences.
4. Select a Model (Optional): Select a Gemini Model using the dropdown menu.
5. Click "Visualize": This will trigger an API request to generate the Chart.js code based on the data and context.
6. View and Refresh: View the generated chart. Click the "Refresh with new Viz" button to attempt a new type of chart.
   • Note: The refresh button is currently in progress.

1. Prerequisites:

   • Node.js and npm installed.
   • A Google Gemini API key. Obtain this from the Google Cloud Console.

2. Clone the Repository:

   git clone <YOUR_GITHUB_REPO_URL>

3. Install Dependencies:

   cd data-viz-llm
   npm install

4. Create a .env file: In the root directory, create a file named .env and add your API key:

   GEMINI_API_KEY=YOUR_ACTUAL_GEMINI_API_KEY
   PORT=3000
   DEFAULT_MODEL=gemini-2.0-flash-thinking-exp-01-21
   

5. Run the Application:

   npm start

   The application should be accessible at http://localhost:3000.

• Frontend: public/js/app.js is the primary JavaScript file, and public/index.html is the main html file.
• Backend: The backend is implemented in server/index.js, uses Express.js.
• Styling: Styling is handled with public/css/style.css, which uses rem units for scalability.
• Testing: Test your application thoroughly using various datasets, contexts, and models.

• LLM Capabilities: The LLM's ability to understand complex instructions and generate perfect code is limited. It might not always create the desired chart or style, especially with highly specialized charts or requests.
• API Rate Limits: The Gemini API has rate limits. Excessive requests might result in temporary throttling.
• Gemini API Key: This application requires a valid Google Gemini API key.
• Data Format: The application requires properly formatted data. Invalid CSV or JSON may cause issues.
• Chart.js Capabilities: Chart.js is excellent for common chart types, but more custom visualizations may require d3.js.

Contributions are welcome! Please open issues and pull requests on GitHub.

[Specify your license, e.g., MIT License]