Fogsight (雾象) English | 中文

This is a forked repository showcasing my leadership and key contributions to frontend development in this project. Please follow this link to view the original repository, or visit the deployed version at Fogsight.ai.

For official proof of my contributions, please refer to the Contributors section in the original Fogsight repository.

My key contributions are listed as follows:

1. Launched Fogsight, a production-ready SaaS AI animation platform powered by LLMs, containerized with Docker and managed via cloud-ready APIs, earning 950+ GitHub stars and attracting thousands of active users.
2. Orchestrated the migration of a legacy bilingual HTML/CSS/JavaScript site to a modern, multilingual React + TypeScript + Vite app, revamping a responsive master-detail layout with dynamic Query and Chat page switching and driving 28% user growth.
3. Reduced server requests by 90% and retrieval latency by 95% through full conversation lifecycle management using normalized, indexed IndexedDB object stores, with monitored capacity scaling to 600+ messages per session without performance loss.
4. Collaborated with UX designers to implement a React Hooks & Refs-based chat interface with auto-scroll, interactive live code viewers, animation previews, and HTML animation-to-video conversion, ensuring seamless UX while preventing state leakage.

Fogsight is an animation‑generation agent powered by large‑language models (LLMs).
Give it an abstract concept or a single word and it will transform it into a high‑quality, vivid animation.

Once Fogsight is deployed locally, simply enter a word and click Generate to watch the animation appear.

We designed an intuitive Language User Interface (LUI) so you can easily edit or refine the generated animation—“say it and it happens.”

Fogsight means “a concrete shape within fuzzy intelligence.”

Animation Samples

Below are animations generated by Fogsight AI. Click any thumbnail to view the video.

The Law of Increasing Entropy (Physics) Input: The Law of Increasing Entropy	Euler’s Polyhedron Formula (Mathematics) Input: Euler’s Polyhedron Formula
Bubble Sort (Computer Science) Input: Bubble Sort	Affordance (Design) Input: affordance in design

Key Features

• Concept‑to‑Vision – Enter a topic and Fogsight delivers a complete narrative animation with bilingual narration and cinematic visuals.
• Intelligent Orchestration – An LLM drives the entire pipeline. From script to visual elements and motion, the AI composes everything in a single pass.
• Language User Interface (LUI) – Iterate and fine‑tune through multi‑turn dialogue until the artwork matches your vision perfectly.

Quick Start

Requirements

• Python 3.9+
• A modern web browser (Chrome, Firefox, Edge, …)
• An LLM API key. We recommend Google Gemini 2.5.

Installation & Run

1. Clone the repository

   git clone https://github.com/fogsightai/fogsight.git
   cd fogsight

2. Install dependencies

   pip install -r requirements.txt

3. Configure your API key

   cp demo-credentials.json credentials.json
   # Edit credentials.json and fill in API_KEY, BASE_URL, and MODEL
   
   # OpenRouter configuration example:
   # {
   #   "API_KEY": "sk-or-v1-YourOpenRouterKey",
   #   "BASE_URL": "https://openrouter.ai/api/v1",
   #   "MODEL": "anthropic/claude-3-sonnet-20240229"
   # }
   
   # Gemini configuration example:
   # {
   #   "API_KEY": "YourGeminiKey",
   #   "BASE_URL": "",
   #   "MODEL": "gemini-2.5-pro"
   # }

4. One‑click launch

   python start_fogsight.py
   # Your browser will open at http://127.0.0.1:8000

5. Create! Enter a topic (e.g. “Bubble Sort”) in the page and wait for the result.

Docker Setup

If you prefer using Docker, follow these steps:

1. Ensure Docker is installed Make sure Docker and docker-compose are installed on your system.

2. Clone the repository

   git clone https://github.com/fogsightai/fogsight.git
   cd fogsight

3. Configure your API key

   cp demo-credentials.json credentials.json
   # Edit credentials.json and fill in API_KEY, BASE_URL, and MODEL (same as above)

4. Launch with Docker Compose

   # Use default port 8000
   docker-compose up -d
   
   # Or specify custom port (e.g., 3000)
   HOST_PORT=3000 docker-compose up -d

5. Access the application Open your browser and visit http://localhost:8000 (or your specified port)

6. Stop the service

   docker-compose down

OpenRouter Support

Fogsight fully supports OpenRouter, allowing you to use various excellent large language models:

Supported Model Examples:

• Anthropic Claude: anthropic/claude-3-sonnet-20240229, anthropic/claude-3-opus-20240229
• OpenAI GPT: openai/gpt-4-turbo, openai/gpt-3.5-turbo
• Google Gemini: google/gemini-pro-1.5, google/gemini-pro
• Meta Llama: meta-llama/llama-3-70b-instruct
• Other models: Visit OpenRouter Models for the complete list

Configuration:

1. Register at OpenRouter and get your API key
2. Edit credentials.json:

   {
     "API_KEY": "sk-or-v1-YourOpenRouterKey",
     "BASE_URL": "https://openrouter.ai/api/v1",
     "MODEL": "anthropic/claude-3-sonnet-20240229"
   }

3. Launch the application and use your specified model

Advantages:

• 🌟 Multiple Model Options: Access various top-tier models through one interface
• 💰 Transparent Pricing: Usually more competitive than official APIs
• 🚀 Seamless Switching: Just modify the MODEL field in the configuration file

Contact / Community

Join the discussion via this link.

Contributors

Academia

• @taited – PhD Student, CUHK (Shenzhen)
• @yjydya – PhD Student, Nanyang Technological University
• @zhichzhang - Master Student, University of Southern California

WaytoAGI Community

• @richkatchen / 陈财猫
• @kk

Index Future Lab

• Lin He

AI Explorers

• Xiaodao Huang

Independent Developers & AI Artists

• @shuyan-5200
• Ruyue Wang
• @Jack‑the‑Builder
• @xiayurain95
• @Lixin Cai

License

This project is released under the MIT License. If you cite this project with attribution and a link back, we’ll be very grateful 😊.

Fogsight is part of the WaytoAGI open‑source programme — empowering more people through AI.