Update README.md

README.md

@@ -4,81 +4,234 @@ emoji: 💻
 colorFrom: indigo
 colorTo: blue
 sdk: streamlit
-sdk_version: 1.47.0
+sdk_version: 1.46.1
 app_file: app.py
 pinned: true
-thumbnail: >-
-  https://cdn-uploads.huggingface.co/production/uploads/6752c8b21288ea13c1ceeef0/ABBVkk2t2WGk9W1FMZNYX.png
-short_description: An AI-powered multi-language code editor with real-time exec
 ---
 
 # 💻 Pro Code Playground
 
-**Pro Code Playground** is an open-source, multi-language code editor with real-time execution and built-in AI assistance — all in your browser.
+**Pro Code Playground** is an interactive, multi-language coding environment with a built-in AI assistant and live execution — all accessible directly from your browser.
 
-Built using [Streamlit](https://streamlit.io), it supports multiple languages, code uploads, theme switching, and AI code help via **Groq's LLaMA 3.3**.
+Powered by Hugging Face Spaces, Streamlit, and Groq’s LLaMA 3.3–70B, this project merges code editing, language support, AI debugging, and even narration in a single clean, responsive app. No installations. No setup. Just code, ask, listen, and learn.
 
 ---
 
-## 🚀 Features
+## 🔥 Features
 
-- 🧠 **AI Code Assistant** powered by Groq’s LLaMA-3 70B (via LangChain)
-- ✍️ **Multi-language support**: Python, Java, C++, C, JavaScript, C#
-- 📤 **File uploader** with auto language detection
-- 📥 **Stdin simulation** for interactive inputs
-- 🌓 **Dark/Light theme toggle**
-- 💬 **Scrollable chatbot** with memory and summarization
-- 🔊 **Narration**: Converts answers to audio with Edge TTS
-- 🧾 **Download your code** in one click
-- 📏 **Execution metrics**: Time & memory used
+- 🧠 AI-powered Code Assistant via **Groq + LangChain**
+- ✍️ Support for **Python, Java, C++, C, JavaScript, C#**
+- 📤 File upload with **auto language detection**
+- 📥 Stdin simulation for programs needing user input
+- 🔊 **Voice narration** of assistant responses (Edge TTS)
+- 💬 Scrollable chatbot with memory and summarization
+- 🌓 **Dark/light theme toggle** with instant styling
+- 💾 One-click code download with proper extension
+- 🧪 Runtime stats (execution time, memory used)
 
 ---
 
-## 🧠 Tech Stack
+## 🚀 Try It Live
 
-- **Frontend**: Streamlit + streamlit-ace
-- **AI Backend**: LangChain + Groq (LLaMA 3.3–70B)
-- **Execution**: Native subprocess + OneCompiler API
-- **Audio**: Edge-TTS
-- **Hosting**: Hugging Face Spaces
+👉 [Click here to run it](https://huggingface.co/spaces/vsj0702/Code_editor)  
+No login or install required — it runs right in your browser.
 
 ---
 
-## 🛠️ Modular Codebase
+# 📘 Usage Guide
 
-```text
-├── app.py             # Main entry point
-├── code_editor.py     # Code editor & execution logic
-├── chatbot.py         # LLM assistant logic
-├── layout.py          # Theme and CSS customization
-├── utils.py           # Language-specific runners
-├── requirements.txt   # Python dependencies
-```
+### 🌙 1. Toggle Light/Dark Theme
+
+- Click the theme button (🌙 or ☀️) on the top-right to switch between dark and light modes.
+- Styling is fully dynamic and applies instantly to all components including the code editor and chat.
+
+---
+
+### 🧑‍💻 2. Select a Language
+
+- Choose from: Python, Java, C, C++, JavaScript, or C#
+- Language auto-switches when uploading supported files
+
+---
+
+### 📝 3. Write or Upload Code
+
+- Start writing code directly in the editor
+- Or upload a file: `.py`, `.cpp`, `.c`, `.java`, `.js`, `.cs`, `.txt`
+- The editor auto-switches to the detected language
+
+---
+
+### 🧪 4. Input (stdin)
+
+- Use the **Input (stdin)** text box for user inputs
+- Inputs are passed line-by-line to your code
+
+---
+
+### ▶️ 5. Run the Code
+
+- Hit **▶️ Run**
+- Output is shown in a result panel
+- Errors are displayed separately in red
+- Runtime and memory stats appear below the result
+
+---
+
+### 💬 6. Ask the AI Assistant
+
+- Use the chat sidebar to ask anything about your code
+- The AI uses full context (code, input, output, errors, history)
+- Great for debugging, refactoring, or learning
+
+---
+
+### 🔊 7. Narrate Responses
+
+- Click "🔊 Narrate" to generate a voice explanation of the AI’s answer
+- Plays using Edge TTS voices
+- You can replay the audio or skip it
+
+---
+
+### 💾 8. Download Your Code
+
+- Download the edited code anytime
+- File is automatically named with the correct extension
+
+---
+
+# 🌳 File Structure: Think of It Like a Tree
+
+Imagine your app like a growing tree.
+
+At the **trunk**, there’s `app.py` — the brain of your app. Everything connects to it, and it sends life (data, layout, session state) to all other components. From this trunk, other files branch out like **modules**, each handling a specific responsibility. The result? A modular, clean, powerful structure that makes debugging and extending your app a breeze.
+
+---
+
+### 🌲 `app.py` — The Trunk of the Tree
+
+This is the **entry point** of the application — the first file Streamlit runs. Think of it as the control center. Its responsibilities include:
+
+- Setting page layout and title
+- Initializing theme and session state
+- Dividing the screen into columns
+- Calling the editor module (`code_editor.py`) on the left
+- Calling the chatbot module (`chatbot.py`) on the right
+
+**Without this file, nothing would render.** It acts as the coordinator, delegating tasks to the appropriate submodules like a team lead.
+
+---
+
+### 🌿 `code_editor.py` — The Code Branch
+
+This file handles everything related to writing and running code. It’s like the **workbench** where users type, upload, and execute their programs.
+
+Key responsibilities:
+- Displaying the code editor using `streamlit_ace`
+- Handling file uploads and auto-detecting language
+- Taking user input (stdin)
+- Running code via the backend (local or OneCompiler API)
+- Showing output, errors, runtime, and memory stats
+- Offering code download with the correct extension
+
+It’s tightly integrated with `utils.py`, which handles the actual logic for compiling and executing the code.
+
+---
+
+### 🌿 `chatbot.py` — The Smart Brain Branch
+
+This file gives your app its **AI assistant powers**. It's responsible for:
+
+- Talking to Groq's LLaMA 3.3 model via LangChain
+- Generating code explanations, debugging suggestions, and summaries
+- Managing a memory-aware chat history
+- Handling narration of responses using Edge TTS
+- Controlling how chatbot responses are shown (Markdown + CSS)
+- Making sure your assistant sounds human-like, helpful, and context-aware
+
+It’s the most dynamic and intelligent part of the app — and beautifully modular.
+
+---
+
+### 🌿 `layout.py` — The Skin and Styling Layer
+
+This file controls the **aesthetic** of your app. It defines:
+
+- Light and dark themes
+- Custom CSS injected into Streamlit
+- Fonts, button styles, scroll behavior, sidebar visuals
+- Consistent layout feel across components
+
+Whenever the user toggles dark mode, `layout.py` updates everything instantly. It makes your app look polished and consistent, like a professionally built product.
+
+---
+
+### 🌿 `utils.py` — The Engine Room
+
+This is your app’s **execution engine**.
+
+It abstracts the messy stuff — compiling, running, capturing outputs, handling errors — so that the rest of the app stays clean.
+
+Responsibilities include:
+- Executing Python code using `exec()` with stdin override
+- Compiling and running C/C++ code via `gcc`/`g++`
+- Sending Java, JavaScript, and C# code to OneCompiler API
+- Gracefully falling back between API keys if one fails
+- Returning outputs, stderr, and exceptions for display
+
+If `code_editor.py` is the workbench, this file is the **machine under the hood**.
+
+---
+
+### 🌿 `requirements.txt` — The DNA
+
+This file contains all the dependencies needed to run the app.
+
+From Streamlit to LangChain, Edge TTS to Groq’s SDK — this file ensures your app has all the tools it needs to function.
+
+---
+
+### 🌱 Summary: A Living, Breathing System
+
+Every file has a job. Every module connects like a healthy tree:
+
+- `app.py` = Trunk (controls everything)
+- `layout.py` = Skin and theme
+- `code_editor.py` = Workbench for code
+- `utils.py` = Engine for execution
+- `chatbot.py` = Brain for intelligence
+- `requirements.txt` = Genetic blueprint
+
+This modular structure lets you:
+- Debug easily
+- Extend individual parts without breaking others
+- Understand how data flows
+- Keep your code organized and clean
 
 ---
 
-## 🧪 Try It Live
+If you’re reading this to understand or contribute — welcome aboard! The structure is made for developers like you.
 
-👉 [Click here to run the app](https://huggingface.co/spaces/vsj0702/Code_editor)  
-No login or setup required — just type, run, and chat!
+Feel free to explore each module and give feedback 🙌
 
 ---
 
-## 🤝 Contribute or Fork
+## 👤 Author
 
-This project is open to contributions.  
-You can clone this Space, fork it, or add new features like test case evaluation, Gist export, or multi-file projects.
+**Vaibhav Shankar (vsj0702)**  
+📧 Email: [vsj0702@gmail.com](mailto:vsj0702@gmail.com)  
+🔗 LinkedIn: [vaibhavshankar](https://www.linkedin.com/in/vaibhavshankar?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app)  
+🤗 Hugging Face: [@vsj0702](https://huggingface.co/vsj0702)
 
 ---
 
-## 🧠 Powered by
+## 📜 License
 
-- **LLaMA 3–70B (Groq)**
-- **LangChain prompt templates & memory**
-- **Edge TTS** for text-to-speech
-- **Hugging Face Spaces** for deployment
+This project is licensed under the **GNU General Public License v3.0 (GVL-3)**.  
+You are free to use, modify, and distribute the project under the terms of this license.
 
 ---
 
-Made with ❤️ by **Vaibhav (vsj0702)**  
-📧 Contact: [vsj0702@gmail.com](mailto:vsj0702@gmail.com)
+Thanks for exploring **Pro Code Playground** 💻  
+Let me know what you build with it!