Spaces:
Running
Running
| 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! |