Spaces:

freddyaboulton
/

llama-code-editor

Running

App Files Files Community

freddyaboulton HF Staff commited on Nov 19, 2024

Commit

5197529

1 Parent(s): e573b81

code

Browse files

Files changed (6) hide show

.gitignore +1 -0
app.py +140 -0
requirements.in +5 -0
requirements.txt +288 -0
sandbox.html +43 -0
spinner.html +60 -0

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ .env

app.py ADDED Viewed

	@@ -0,0 +1,140 @@

+import gradio as gr
+from gradio_webrtc import WebRTC, ReplyOnPause, AdditionalOutputs
+import numpy as np
+import os
+from twilio.rest import Client
+import base64
+import openai
+import re
+from huggingface_hub import InferenceClient
+from pydub import AudioSegment
+import io
+from dotenv import load_dotenv
+load_dotenv()
+hf_client = InferenceClient()
+spinner_html = open("spinner.html").read()
+account_sid = os.environ.get("TWILIO_ACCOUNT_SID")
+auth_token = os.environ.get("TWILIO_AUTH_TOKEN")
+if account_sid and auth_token:
+    client = Client(account_sid, auth_token)
+    token = client.tokens.create()
+    rtc_configuration = {
+        "iceServers": token.ice_servers,
+        "iceTransportPolicy": "relay",
+    }
+else:
+    rtc_configuration = None
+client = openai.OpenAI(
+    api_key=os.environ.get("SAMBANOVA_API_KEY"),
+    base_url="https://api.sambanova.ai/v1",
+)
+system_prompt = "You are an AI coding assistant. Your task is to write single-file HTML applications based on a user's request. Only return the necessary code. Include all necessary imports and styles. You may also be asked to edit your original response."
+user_prompt = "Please write a single-file HTML application to fulfill the following request.\nThe message:{user_message}\nCurrent code you have written:{code}"
+def extract_html_content(text):
+    """
+    Extract content including HTML tags.
+    """
+    match = re.search(r'<!DOCTYPE html>.*?</html>', text, re.DOTALL)
+    return match.group(0) if match else None
+def audio_to_bytes(audio: tuple[int, np.ndarray]):
+    audio_segment = AudioSegment(
+        audio[1].squeeze().tobytes(),
+        frame_rate=audio[0],
+        sample_width=audio[1].dtype.itemsize,
+        channels=1
+    )
+    # Export the audio segment to MP3 bytes - use a high bitrate to maximise quality
+    mp3_io = io.BytesIO()
+    audio_segment.export(mp3_io, format="mp3", bitrate="320k")
+    # Get the MP3 bytes
+    mp3_bytes = mp3_io.getvalue()
+    mp3_io.close()
+    return mp3_bytes
+def display_in_sandbox(code):
+    encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8')
+    data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
+    return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"600px\"></iframe>"
+def generate(user_message: tuple[int, np.ndarray],
+             history: list[dict],
+             code: str):
+    yield AdditionalOutputs(history, spinner_html)
+    text = hf_client.automatic_speech_recognition(audio_to_bytes(user_message)).text
+    user_msg_formatted = user_prompt.format(user_message=text, code=code)
+    history.append({"role": "user", "content": user_msg_formatted})
+    response = client.chat.completions.create(
+        model='Meta-Llama-3.1-70B-Instruct',
+        messages=history,
+        temperature =  0.1,
+        top_p = 0.1
+    )
+    output = response.choices[0].message.content
+    html_code = extract_html_content(output)
+    history.append({"role": "assistant", "content": output})
+    yield AdditionalOutputs(history, html_code)
+with gr.Blocks(css=".code-component {max-height: 500px !important}") as demo:
+    history = gr.State([{"role": "system", "content": system_prompt}])
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML(
+                """
+                <h1 style='text-align: center'>
+                Llama Code Editor
+                </h1>
+                <h2 style='text-align: center'>
+                Powered by SambaNova and Gradio-WebRTC ⚡️
+                </h2>
+                <p style='text-align: center'>
+                Create and edit single-file HTML applications with just your voice!.
+                </p>
+                <p style='text-align: center'>
+                Each conversation is limited to 90 seconds. Once the time limit is up you can rejoin the conversation.
+                </p>
+                """
+        )
+            webrtc = WebRTC(rtc_configuration=rtc_configuration,
+                        mode="send", modality="audio")
+        with gr.Column(scale=10):
+            with gr.Tabs():
+                with gr.Tab("Sandbox"):
+                    sandbox = gr.HTML(value=open("sandbox.html").read())
+                with gr.Tab("Code"):
+                    code = gr.Code(language="html", max_lines=50, interactive=False, elem_classes="code-component")
+                with gr.Tab("Chat"):
+                    cb = gr.Chatbot(type="messages")
+    webrtc.stream(ReplyOnPause(generate),
+                  inputs=[webrtc, history, code],
+                  outputs=[webrtc], time_limit=90)
+    webrtc.on_additional_outputs(lambda history, code: (history, code, history),
+                                 outputs=[history, code, cb])
+    code.change(display_in_sandbox, code, sandbox, queue=False)
+if __name__ == "__main__":
+    demo.launch()

requirements.in ADDED Viewed

	@@ -0,0 +1,5 @@

+gradio_webrtc[vad]
+openai
+python-dotenv
+twilio
+numba==0.60.0

requirements.txt ADDED Viewed

	@@ -0,0 +1,288 @@

+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in -o requirements.txt
+aiofiles==23.2.1
+    # via gradio
+aiohappyeyeballs==2.4.3
+    # via aiohttp
+aiohttp==3.11.3
+    # via
+    #   aiohttp-retry
+    #   twilio
+aiohttp-retry==2.8.3
+    # via twilio
+aioice==0.9.0
+    # via aiortc
+aiortc==1.9.0
+    # via gradio-webrtc
+aiosignal==1.3.1
+    # via aiohttp
+annotated-types==0.7.0
+    # via pydantic
+anyio==4.6.2.post1
+    # via
+    #   gradio
+    #   httpx
+    #   openai
+    #   starlette
+attrs==24.2.0
+    # via aiohttp
+audioread==3.0.1
+    # via librosa
+av==12.3.0
+    # via aiortc
+certifi==2024.8.30
+    # via
+    #   httpcore
+    #   httpx
+    #   requests
+cffi==1.17.1
+    # via
+    #   aiortc
+    #   cryptography
+    #   pylibsrtp
+    #   soundfile
+charset-normalizer==3.4.0
+    # via requests
+click==8.1.7
+    # via
+    #   typer
+    #   uvicorn
+coloredlogs==15.0.1
+    # via onnxruntime
+cryptography==43.0.3
+    # via
+    #   aiortc
+    #   pyopenssl
+decorator==5.1.1
+    # via librosa
+distro==1.9.0
+    # via openai
+dnspython==2.7.0
+    # via aioice
+fastapi==0.115.5
+    # via gradio
+ffmpy==0.4.0
+    # via gradio
+filelock==3.16.1
+    # via huggingface-hub
+flatbuffers==24.3.25
+    # via onnxruntime
+frozenlist==1.5.0
+    # via
+    #   aiohttp
+    #   aiosignal
+fsspec==2024.10.0
+    # via
+    #   gradio-client
+    #   huggingface-hub
+google-crc32c==1.6.0
+    # via aiortc
+gradio==5.6.0
+    # via gradio-webrtc
+gradio-client==1.4.3
+    # via gradio
+gradio-webrtc==0.0.13
+    # via -r requirements.in
+h11==0.14.0
+    # via
+    #   httpcore
+    #   uvicorn
+httpcore==1.0.7
+    # via httpx
+httpx==0.27.2
+    # via
+    #   gradio
+    #   gradio-client
+    #   openai
+    #   safehttpx
+huggingface-hub==0.26.2
+    # via
+    #   gradio
+    #   gradio-client
+humanfriendly==10.0
+    # via coloredlogs
+idna==3.10
+    # via
+    #   anyio
+    #   httpx
+    #   requests
+    #   yarl
+ifaddr==0.2.0
+    # via aioice
+jinja2==3.1.4
+    # via gradio
+jiter==0.7.1
+    # via openai
+joblib==1.4.2
+    # via
+    #   librosa
+    #   scikit-learn
+lazy-loader==0.4
+    # via librosa
+librosa==0.10.2.post1
+    # via gradio-webrtc
+llvmlite==0.43.0
+    # via numba
+markdown-it-py==3.0.0
+    # via rich
+markupsafe==2.1.5
+    # via
+    #   gradio
+    #   jinja2
+mdurl==0.1.2
+    # via markdown-it-py
+mpmath==1.3.0
+    # via sympy
+msgpack==1.1.0
+    # via librosa
+multidict==6.1.0
+    # via
+    #   aiohttp
+    #   yarl
+numba==0.60.0
+    # via
+    #   -r requirements.in
+    #   librosa
+numpy==2.0.2
+    # via
+    #   gradio
+    #   librosa
+    #   numba
+    #   onnxruntime
+    #   pandas
+    #   scikit-learn
+    #   scipy
+    #   soxr
+onnxruntime==1.20.0
+    # via gradio-webrtc
+openai==1.54.4
+    # via -r requirements.in
+orjson==3.10.11
+    # via gradio
+packaging==24.2
+    # via
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   lazy-loader
+    #   onnxruntime
+    #   pooch
+pandas==2.2.3
+    # via gradio
+pillow==11.0.0
+    # via gradio
+platformdirs==4.3.6
+    # via pooch
+pooch==1.8.2
+    # via librosa
+propcache==0.2.0
+    # via
+    #   aiohttp
+    #   yarl
+protobuf==5.28.3
+    # via onnxruntime
+pycparser==2.22
+    # via cffi
+pydantic==2.9.2
+    # via
+    #   fastapi
+    #   gradio
+    #   openai
+pydantic-core==2.23.4
+    # via pydantic
+pydub==0.25.1
+    # via gradio
+pyee==12.1.1
+    # via aiortc
+pygments==2.18.0
+    # via rich
+pyjwt==2.10.0
+    # via twilio
+pylibsrtp==0.10.0
+    # via aiortc
+pyopenssl==24.2.1
+    # via aiortc
+python-dateutil==2.9.0.post0
+    # via pandas
+python-dotenv==1.0.1
+    # via -r requirements.in
+python-multipart==0.0.12
+    # via gradio
+pytz==2024.2
+    # via pandas
+pyyaml==6.0.2
+    # via
+    #   gradio
+    #   huggingface-hub
+requests==2.32.3
+    # via
+    #   huggingface-hub
+    #   pooch
+    #   twilio
+rich==13.9.4
+    # via typer
+ruff==0.7.4
+    # via gradio
+safehttpx==0.1.1
+    # via gradio
+scikit-learn==1.5.2
+    # via librosa
+scipy==1.14.1
+    # via
+    #   librosa
+    #   scikit-learn
+semantic-version==2.10.0
+    # via gradio
+shellingham==1.5.4
+    # via typer
+six==1.16.0
+    # via python-dateutil
+sniffio==1.3.1
+    # via
+    #   anyio
+    #   httpx
+    #   openai
+soundfile==0.12.1
+    # via librosa
+soxr==0.5.0.post1
+    # via librosa
+starlette==0.41.3
+    # via
+    #   fastapi
+    #   gradio
+sympy==1.13.3
+    # via onnxruntime
+threadpoolctl==3.5.0
+    # via scikit-learn
+tomlkit==0.12.0
+    # via gradio
+tqdm==4.67.0
+    # via
+    #   huggingface-hub
+    #   openai
+twilio==9.3.7
+    # via -r requirements.in
+typer==0.13.1
+    # via gradio
+typing-extensions==4.12.2
+    # via
+    #   fastapi
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   librosa
+    #   openai
+    #   pydantic
+    #   pydantic-core
+    #   pyee
+    #   typer
+tzdata==2024.2
+    # via pandas
+urllib3==2.2.3
+    # via requests
+uvicorn==0.32.0
+    # via gradio
+websockets==12.0
+    # via gradio-client
+yarl==1.17.2
+    # via aiohttp

sandbox.html ADDED Viewed

	@@ -0,0 +1,43 @@

+<div style="
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+  border-radius: 8px;
+  border: 2px dashed #cbd5e1;
+  padding: 2rem;
+  text-align: center;
+  color: #64748b;
+  font-family: system-ui, -apple-system, sans-serif;
+">
+  <div style="
+    width: 80px;
+    height: 80px;
+    margin-bottom: 1.5rem;
+    border: 3px solid #cbd5e1;
+    border-radius: 12px;
+    position: relative;
+  ">
+    <div style="
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 2rem;
+    ">📦</div>
+  </div>
+  <h2 style="
+    margin: 0 0 0.5rem 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #475569;
+  ">No Application Created</h2>
+  <p style="
+    margin: 0;
+    font-size: 1rem;
+    max-width: 300px;
+    line-height: 1.5;
+  ">Create your first application to get started with the sandbox environment</p>
+</div>

spinner.html ADDED Viewed

	@@ -0,0 +1,60 @@

+<div style="
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  font-family: system-ui, -apple-system, sans-serif;
+">
+  <!-- Spinner container -->
+  <div style="
+    position: relative;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1.5rem;
+  ">
+    <!-- Static ring -->
+    <div style="
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border: 4px solid #e2e8f0;
+      border-radius: 50%;
+    "></div>
+    <!-- Animated spinner -->
+    <div style="
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border: 4px solid transparent;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    "></div>
+  </div>
+  <!-- Text content -->
+  <h2 style="
+    margin: 0 0 0.5rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #475569;
+  ">Generating your application...</h2>
+  <p style="
+    margin: 0;
+    font-size: 0.875rem;
+    color: #64748b;
+  ">This may take a few moments</p>
+  <style>
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+</div>