Fix/debug tripsitter app

README.md

@@ -1,66 +1,82 @@
-## Devvit Bolt Starter Experimental
+# TripSitter AI
 
-An experimental starter that explores a new way to build applications on Reddit's developer platform.
+TripSitter AI is a standalone, browser-based audio-visual experience that uses your webcam or a video file to generate real-time psychedelic and glitch art effects with WebGL. It also integrates several AI-powered features to create generative soundscapes, narrate your "trip," and even write new visual shaders on the fly.
 
-## Video Tutorial
+![TripSitter AI Preview](https://i.imgur.com/zJd9f8m.png)
 
-[![Video Tutorial](docs-img/video-preview.png)](https://www.youtube.com/watch?v=uI85NRCoQNU)
+---
 
-## Getting Started
+## Key Features
 
-This template is made specifically to work with **Bolt.new**.
-Click the button below to open this template directly in Bolt:
+*   **Real-Time Video Effects:** Applies complex shaders to your webcam feed or an uploaded video/image file in real-time.
+*   **Multiple Shader Effects:** Comes with several built-in effects like Datamosh, Pixel Sort, Feedback loops, and Color Shifting.
+*   **Fine-Grained Control:** Adjust dozens of parameters like trail length, motion sensitivity, hue, displacement, and color saturation to customize the visuals.
+*   **Effect Presets:** Quickly switch between different visual styles with predefined presets like "Psychedelic," "Ghostly," and "Glitchy VHS."
+*   **AI Shader Lab:** Describe a visual effect in plain English, and the AI will attempt to generate a new GLSL shader for you to use instantly. You can also paste raw GLSL code directly for testing.
+*   **AI Art Interpretation:** Take a snapshot of the current visual and have the AI provide a poetic, critical interpretation of the art.
+*   **AI Soundscapes:** Generate an atmospheric, ambient soundscape with Tone.js based on the AI's analysis of the current visuals.
+*   **AI Trip Narration:** Let the AI watch your visual stream and generate a surreal, spoken-word narration for your experience, with optional Text-to-Speech.
+*   **AI Copilot:** Control the visual parameters using natural language commands (e.g., "make it more chaotic").
+*   **Autonomous Mode:** Let the AI take full control, continuously evolving the shader code and narrating the journey for a unique, hands-free experience.
+*   **Recording & Snapshots:** Easily record your visual creations as video files or save high-resolution snapshots.
+*   **Share Your Settings:** Generate a unique URL that saves all your current control settings, allowing you to share your exact visual setup with others.
+*   **No Installation Required:** Runs entirely in your web browser from a single HTML file.
 
-<a href="https://bolt.new/github.com/reddit/devvit-bolt-starter-experimental"><img src="docs-img/open-in-bolt-2x.png" heigh="36px" width="199px" alt="Open in Bolt"></a>
+---
 
-As soon as the project is checked out you will get the following errors.
-**This is expected**!
+## How to Use
 
-```
-❌  Authentication: Please run `npm run login` to authenticate with Reddit
-❌  App initialization: Please run `npm run devvit:init` to setup your app remotely
-❌  Playtest subreddit: Please update YOUR_SUBREDDIT_NAME in the dev:devvit script in package.json
-```
+This application is a single, self-contained HTML file and requires no complex installation or build steps.
 
-### Step 1: Login
+### Option 1: Run Directly in the Browser
 
-In bolt terminal, run
+The easiest way to use TripSitter AI is to simply open the `index.html` file in a modern web browser.
 
-```
-npm run login
-```
+1.  Download the `index.html` file to your computer.
+2.  Navigate to the folder where you saved it.
+3.  Double-click the `index.html` file, or right-click it and select "Open with" and choose a browser like Google Chrome, Mozilla Firefox, or Microsoft Edge.
+4.  The application will request permission to use your webcam. You must **Allow** this for the main feature to work.
 
-This will authenticate with Reddit. You will be prompted to follow a link and paste an authentication code.
-Paste that authentication code in your **terminal window** in Bolt, then press `<Enter>`.
+### Option 2: Run from a Local Web Server (Recommended for some features)
 
-### Step 2: App Initialization
+Some browsers have security restrictions about accessing local files (`file://`). For the best experience, especially with file uploads, it's recommended to run it from a simple local web server.
 
-In bolt terminal, run
+1.  **If you have Python installed:**
+    *   Open a terminal or command prompt.
+    *   Navigate to the directory containing `index.html`.
+    *   Run the command: `python -m http.server`
+    *   Open your web browser and go to `http://localhost:8000`.
 
-```
-npm run devvit:init
-```
+2.  **If you have Node.js installed:**
+    *   Open a terminal or command prompt.
+    *   Install a simple server package if you don't have one: `npm install -g serve`
+    *   Navigate to the directory containing `index.html`.
+    *   Run the command: `serve .`
+    *   Open your web browser and go to the local address provided in the terminal (usually `http://localhost:3000`).
 
-This will get your app set up with Devvit. You will be prompted to follow a link and paste an authentication code. Paste that authentication code in your **terminal window** in Bolt, then press `<Enter>`.
+---
 
-### Step 3: Playtest subreddit
+## Important: AI Features API Key
 
-For this step, you will need to go to Reddit and create an empty subreddit for you to test your app.
+To use the AI-powered features (Shader Lab, Art Interpretation, Soundscapes, Narration, Copilot), you must provide your own Google Gemini API key.
 
-You can do this by following going to [Reddit](https://www.reddit.com) and clicking the **"Create a Community"** button in the left-side navigation. Once you create your community, paste the name of the subreddit (for example if you community is reddit.com/r/my_test_subreddit, you will paste `my_test_subreddit`) into the `package.json` file, replacing the string `YOUR_SUBREDDIT_NAME`.
+1.  Open the `index.html` file in a text editor.
+2.  Find the line (around line 1250) that looks like this:
+    ```javascript
+    async function geminiApiCall(payload) {
+        const apiKey = ""; // <--- PASTE YOUR API KEY HERE
+        // ...
+    }
+    ```
+3.  Paste your Google Gemini API key between the double quotes.
+4.  Save the file and open it in your browser. The AI features will now be enabled.
 
-After that, if you run `npm run dev` again, all checks should pass and you should be able to test your application on Reddit.
+---
 
-### Step 4: Testing your app
+## Technology Stack
 
-Once the initial configuration is done, you can test your application by navigating to your test subreddit, clicking the three dots icon on the top-right and creating a new post. The command will be called `[Bolt Word Guesser] New Post`. Once you create a new post you can go back and forth with Bolt by prompting your way to making your app and testing it on Reddit.
-
-Now vibe code away!
-
-### Known limitations
-
-- **Only test on your subreddit:** Your app's backend requests will not work on Bolt's preview window. You need to continue to test your app running in your subreddit, where your backend code will work.
-
-- **Use Reddit's backend:** Devvit provides a free of charge scalable backend. Bolt will be able to help you use Reddit's Redis database for key-value storage. You are not going to be able to use other tools such as Supabase for your backend.
-
-- **This is experimental:** While the Devvit team is working to make it as easy as possible to use Bolt for authoring Reddit apps, this is all still in an experimental phase. If you run into issues, please [join our Discord](https://discord.com/invite/Cd43ExtEFS) and ask your questions in **#devvit-vibe-coding**
+*   **Frontend:** HTML5, CSS3, Vanilla JavaScript (ES6+)
+*   **Graphics:** WebGL for hardware-accelerated real-time shader processing.
+*   **Audio:** [Tone.js](https://tonejs.github.io/) for generative soundscapes.
+*   **AI:** [Google Gemini API](https://ai.google.dev/) for all generative text and analysis features.
+*   **No backend or server-side logic is required.** The application runs entirely on the client-side.