Spaces:

vsj0702
/

Code_editor

Sleeping

App Files Files Community

vsj0702 commited on Aug 3, 2025

Commit

5bb11d2

verified ·

1 Parent(s): 9c9855b

Update README.md

Browse files

Files changed (1) hide show

README.md +69 -237

README.md CHANGED Viewed

@@ -1,237 +1,69 @@
----
-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!

+Hugging Face's logo
+vsj0702
+/
+Code_editor
+like
+3
+Logs
+build
+container
+===== Application Startup at 2025-08-03 20:01:01 =====
+Collecting usage statistics. To deactivate, set browser.gatherUsageStats to false.
+  You can now view your Streamlit app in your browser.
+  Local URL: http://localhost:8501
+  Network URL: http://10.106.80.28:8501
+  External URL: http://52.201.198.142:8501
+────────────────────────── Traceback (most recent call last) ───────────────────────────
+  /usr/local/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/exec_code.py:
+  128 in exec_func_with_error_handling
+  /usr/local/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/script_runner
+  .py:669 in code_to_exec
+  /home/user/app/app.py:37 in <module>
+    34
+    35 with assistant_col:
+    36 │   st.subheader("Code Assistant")
+  ❱ 37 │   render_chatbot(
+    38 │   │   st.session_state.code,
+    39 │   │   st.session_state.get("stdin", ""),
+    40 │   │   st.session_state.get("code_output", ""),
+  /home/user/app/chatbot.py:139 in render_chatbot
+    136 │   │   bot = CodeAssistantBot()
+    137 │   │   history = st.session_state.conversation[-4:]
+    138 │   │   summary = st.session_state.chat_summary
+  ❱ 139 │   │   response = bot.analyze_code(code, input, output, error, question, summ
+    140 │   │   st.session_state.conversation.append((question, response))
+    141 │   │   st.session_state.chat_display_count = 5
+    142
+  /home/user/app/chatbot.py:47 in analyze_code
+     44 │
+     45 │   def analyze_code(self, code, input, output, error, question, summary="", h
+     46 │   │   recent = "\n".join([f"User: {q}\nBot: {a}" for q, a in (history or [])
+  ❱  47 │   │   prompt = self.analysis_prompt.format_messages({
+     48 │   │   │   'code': code,
+     49 │   │   │   'input': input,
+     50 │   │   │   'output': output,
+────────────────────────────────────────────────────────────────────────────────────────
+TypeError: ChatPromptTemplate.format_messages() takes 1 positional argument but 2 were
+given