Prompt-to-Visualizer Engine 🚀

An AI-powered web application that magically transforms natural language prompts into structured, interactive 2D and 3D network simulations.

📖 Overview

The Prompt-to-Visualizer Engine bridges the gap between text and technical architecture. Instead of manually drawing complex networking diagrams or setting up tedious visual simulations, you can simply type what you want to see. The application uses advanced parsing (powered optionally by Hugging Face LLMs) to understand your intent and dynamically renders a fully interactive diagram or 3D scene representing your request.

🛠️ How It Works

The engine operates on a three-step architecture:

1. Input & Parsing: The user enters a natural language prompt (e.g., "Show TCP 3-way handshake with packet loss"). This prompt is sent to our backend.
2. Intent Extraction:
   • AI Parser: If configured, a Hugging Face LLM processes the text and extracts entities, relationships, and parameters, converting them into a structured JSON schema.
   • Fallback Parser: If no API key is provided, a lightweight, keyword-based regex engine intelligently maps terms to the schema.
3. Dynamic Rendering: The frontend consumes this structured JSON schema:
   • 2D Mode: Uses React Flow to draw node-based architecture diagrams (great for topologies).
   • 3D Mode: Uses Three.js (via @react-three/fiber) to build immersive, spatial environments (great for abstract networking concepts).

💡 Use Cases

• 🎓 Education: Instructors can instantly generate visualizations of complex protocols (like DNS resolution or TCP handshakes) to help students learn visually.
• 🛡️ Cybersecurity: Visualize attack vectors (e.g., DDoS attacks, MITM) and network topologies in real-time.
• 🏗️ System Design: Quickly mock up cloud architectures or microservice interactions during brainstorming sessions without touching a diagramming tool.
• 📚 Technical Documentation: Generate interactive representations of how a software system communicates internally.

✨ Features

• Natural Language Processing: Turn plain English into structured specifications.
• Dual Rendering Modes: Seamlessly switch between or combine 2D graph views and 3D simulations.
• Interactive Controls: Users can play with simulation parameters directly within the rendered views.
• Domain Support: Pre-configured to understand networking, cybersecurity, and high-level system design concepts.
• Zero-Config Fallback: Works entirely offline/locally using the built-in deterministic parser if AI APIs are unavailable.

🚀 Getting Started

First, clone the repository and install the dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

🎮 Usage Guide

1. Open the app in your browser.
2. In the input box, enter a scenario, for example:
   • "Visualize a multi-AZ AWS cloud architecture."
   • "Show me a DDoS attack hitting a load balancer."
3. Click "Generate Visualization" to process the prompt.
4. Interact with the resulting 2D/3D output in the main panel.
5. You can also click any of the built-in Test Cases on the left panel to see immediate examples.

🧠 LLM Integration (Optional)

To get the most accurate parsing for complex, unconventional prompts, you can enable the Hugging Face AI parser:

1. Create a .env.local file in the root of the project.
2. Add your token: HF_API_KEY=your_huggingface_api_token. (You can generate a free token from your Hugging Face settings)
3. The Next.js API route (GET /api/parse) will automatically detect the key and route requests to the AI model.

🏗️ Project Structure

• app/page.tsx - Main User Interface & Layout.
• app/components/ - Reusable UI, 3D Canvas, and React Flow components.
• app/types/schema.ts - TypeScript interfaces defining the engine's internal data model.
• app/utils/parser.ts - The deterministic fallback parsing logic.
• app/data/testCases.ts - A collection of sample prompts to demonstrate capabilities.

💻 Technologies Used

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• 3D Rendering: Three.js & React Three Fiber
• 2D Node Graphs: React Flow
• Code Viewing: Monaco Editor
• AI/ML: Hugging Face Inference API

🌍 Deploying

This project is optimized for deployment on Vercel.

• Push your code to a Git repository.
• Import the project into Vercel.
• Add your HF_API_KEY to the environment variables in the Vercel dashboard.
• Deploy! Alternatively, build locally with npm run build and run with npm run start.