Clean up logging and add timestamps.

app.py

@@ -1,16 +1,30 @@
+import logging
 import os
+import re
 from pathlib import Path
+
 import gradio as gr
-import re
+import requests
 import torch
 from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline
-import requests
+
+logging.basicConfig(
+    level=logging.INFO,  # Set the logging level to INFO or any other desired level
+    format="%(asctime)s - %(message)s",  # Define the log message format
+    datefmt="%Y-%m-%d %H:%M:%S",  # Define the timestamp format
+)
+
+logger = logging.getLogger("my_logger")
 
 HF_TOKEN = os.getenv("HF_TOKEN")
 
+if not HF_TOKEN:
+    raise Exception("HF_TOKEN environment variable is required to call remote API.")
+
 API_URL = "https://api-inference.huggingface.co/models/HuggingFaceH4/zephyr-7b-beta"
 headers = {"Authorization": f"Bearer {HF_TOKEN}"}
 
+
 def init_speech_to_text_model():
     device = "cuda:0" if torch.cuda.is_available() else "cpu"
     torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
@@ -72,14 +86,10 @@ frame.contentWindow.document.close();
 
 #  TODO: Works but is inefficient because the iframe has to be reloaded each time
 update_iframe_js = f"""(code) => {{
-console.log(`UPDATING CODE`);
-console.log(code)
 const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
 const template = `{html_template}`;
 const completedTemplate = template.replace(pattern, code);
 
-console.log(completedTemplate);
-
 const oldFrame = document.querySelector('.my-frame');
 oldFrame.remove();
 
@@ -94,7 +104,6 @@ const frame = document.querySelector('.my-frame');
 frame.contentWindow.document.open('text/html', 'replace');
 frame.contentWindow.document.write(completedTemplate);
 frame.contentWindow.document.close();
-console.log(`UPDATE DONE`);
 }}"""
 
 copy_snippet_js = f"""async (code) => {{
@@ -107,15 +116,10 @@ const template = `<div id="KiteWindApp">\n<script type="module" crossorigin src=
 const completedTemplate = template.replace(pattern, code);
 
 const snippet = completedTemplate;
-console.log(snippet);
-
 await navigator.clipboard.writeText(snippet);
-
-console.log(`COPY DONE`);
 }}"""
 
 download_code_js = f"""(code) => {{
-console.log(`DOWNLOADING CODE`);
 const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
 const template = `{html_template}`;
 // Step 1: Generate the HTML content
@@ -137,8 +141,6 @@ downloadLink.click();
 
 // Clean up by revoking the URL
 URL.revokeObjectURL(url);
-
-console.log(`DOWNLOAD DONE`);
 }}"""
 
 
@@ -148,25 +150,28 @@ def query(payload):
 
 
 def generate_text(code, prompt):
-    print(f"Calling API with prompt:\n{prompt}")
+    logger.info(f"Calling API with prompt:\n{prompt}")
     prompt = f"```python\n{code}```\nGiven the code above return only updated code for the following request:\n{prompt}\n<|assistant|>"
     params = {"max_new_tokens": 512}
     output = query({
         "inputs": prompt,
         "parameters": params,
     })
-    print(f'API RESPONSE\n{output[0]["generated_text"]}')
+    if 'error' in output:
+        logger.warning(f'Language model call failed: {output["error"]}')
+        raise gr.Warning(f'Language model call failed: {output["error"]}')
+    logger.info(f'API RESPONSE\n{output[0]["generated_text"]}')
     assistant_reply = output[0]["generated_text"].split('<|assistant|>')[1]
     match = re.search(code_pattern, assistant_reply, re.DOTALL)
     new_code = match.group(1)
-    print(new_code)
+    logger.info(f'NEW CODE:\nnew_code')
     # TODO: error handling here
     return assistant_reply, new_code, None
 
 
 def transcribe(audio):
     result = whisper_pipe(audio)
-    return result["text"]
+    return result["text"], None
 
 
 def copy_notify(code):
@@ -175,7 +180,8 @@ def copy_notify(code):
 
 with gr.Blocks() as demo:
     gr.Markdown("<h1 align=\"center\">KiteWind 🪁🍃</h1>")
-    gr.Markdown("<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
+    gr.Markdown(
+        "<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
     with gr.Row():
         with gr.Column():
             gr.Markdown("## 1. Run your app in the browser!")
@@ -190,11 +196,15 @@ with gr.Blocks() as demo:
             out_text = gr.TextArea(label="Chat Assistant Response")
             clear = gr.ClearButton([in_prompt, in_audio, out_text])
         with gr.Column():
-            code_area = gr.Code(label="App Code - You can also edit directly and then click Update App", language='python', value=starting_app_code)
+            code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
+                                language='python', value=starting_app_code)
             update_btn = gr.Button("Update App", variant="primary")
-            update_btn.click(None, inputs=code_area, outputs=None, _js=update_iframe_js)
-            in_prompt.submit(generate_text, [code_area, in_prompt], [out_text, code_area, in_audio]).then(None, inputs=code_area, outputs=None, _js=update_iframe_js)
-            in_audio.stop_recording(transcribe, [in_audio], [in_prompt]).then(generate_text, [code_area, in_prompt], [out_text, code_area, in_audio]).then(None, inputs=code_area, outputs=None, _js=update_iframe_js)
+            code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None, '_js': update_iframe_js}
+            gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt], 'outputs': [out_text, code_area]}
+            transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
+            update_btn.click(**code_update_params)
+            in_prompt.submit(**gen_text_params).then(**code_update_params)
+            in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
     with gr.Row():
         with gr.Column():
             gr.Markdown("## 3. Export your app to share!")
@@ -206,7 +216,8 @@ with gr.Blocks() as demo:
         with gr.Column():
             gr.Markdown("## Current limitations")
             with gr.Accordion("Click to view", open=False):
-                gr.Markdown("- Only gradio-lite apps using the python standard libraries and gradio are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes\n- The app needs to fully reload each time it is changed")
+                gr.Markdown(
+                    "- Only gradio-lite apps using the python standard libraries and gradio are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes\n- The app needs to fully reload each time it is changed")
 
     demo.load(None, None, None, _js=load_js)
     demo.css = "footer {visibility: hidden}"