--- title: Pro Code Playground emoji: πŸ’» colorFrom: indigo colorTo: blue sdk: streamlit sdk_version: 1.47.0 app_file: app.py pinned: true --- # πŸ’» Pro Code Playground **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. 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 - 🧠 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) --- ## πŸš€ Try It Live πŸ‘‰ [Click here to run it](https://huggingface.co/spaces/vsj0702/Code_editor) No login or install required β€” it runs right in your browser. --- # πŸ“˜ Usage Guide ### πŸŒ™ 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 --- If you’re reading this to understand or contribute β€” welcome aboard! The structure is made for developers like you. Feel free to explore each module and give feedback πŸ™Œ --- ## πŸ‘€ Author **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) --- ## πŸ“œ License 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. --- Thanks for exploring **Pro Code Playground** πŸ’» Let me know what you build with it!