metadata

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
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
🔗 LinkedIn: vaibhavshankar
🤗 Hugging Face: @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!