Spaces:

mandyvarel
/

staticfile

Runtime error

App Files Files Community

mandyvarel commited on Mar 17, 2023

Commit

cedc9e6

•

1 Parent(s): 56a5699

Upload 4 files

Browse files

Files changed (4) hide show

app.py +67 -0
requirements.txt +3 -0
static/1678999939.html +8 -0
static/output.html +44 -0

app.py ADDED Viewed

	@@ -0,0 +1,67 @@

+from pathlib import Path
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+import gradio as gr
+from datetime import datetime
+import sys
+# create a FastAPI app
+app = FastAPI()
+# create a static directory to store the static files
+static_dir = Path('./static')
+static_dir.mkdir(parents=True, exist_ok=True)
+# mount FastAPI StaticFiles server
+app.mount("/static", StaticFiles(directory=static_dir), name="static")
+# Gradio stuff
+def predict(text_input):
+    file_name = f"{datetime.utcnow().strftime('%s')}.html"
+    file_path = static_dir / file_name
+    print(file_path)
+    with open(file_path, "w") as f:
+        f.write(f"""
+        <script src="https://cdn.tailwindcss.com"></script>
+        <body class="bg-gray-200 dark:text-white dark:bg-gray-900">
+        <h1 class="text-3xl font-bold">
+        Hello <i>{text_input}</i> From Gradio Iframe
+        </h1>
+        <h3>Filename: {file_name}</h3>
+        """)
+    iframe = f"""<iframe src="/static/{file_name}" width="100%" height="500px"></iframe>"""
+    link = f'<a href="/static/{file_name}" target="_blank">{file_name}</a>'
+    return link, iframe
+with gr.Blocks() as block:
+    gr.Markdown("""
+## Gradio + FastAPI + Static Server
+This is a demo of how to use Gradio with FastAPI and a static server.
+The Gradio app generates dynamic HTML files and stores them in a static directory. FastAPI serves the static files.
+""")
+    with gr.Row():
+        with gr.Column():
+            text_input = gr.Textbox(label="Name")
+            markdown = gr.Markdown(label="Output Box")
+            new_btn = gr.Button("New")
+        with gr.Column():
+            html = gr.HTML(label="HTML preview", show_label=True)
+    new_btn.click(fn=predict, inputs=[text_input], outputs=[markdown, html])
+# mount Gradio app to FastAPI app
+app = gr.mount_gradio_app(app, block, path="/")
+# serve the app
+if __name__ == "__main__":
+    uvicorn.run(app, host="127.0.0.1", port=7862)
+# run the app with
+# python app.py
+# or
+# uvicorn "app:app" --host "0.0.0.0" --port 7860 --reload

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+uvicorn
+fastapi
+gradio

static/1678999939.html ADDED Viewed

	@@ -0,0 +1,8 @@

+        <script src="https://cdn.tailwindcss.com"></script>
+        <body class="bg-gray-200 dark:text-white dark:bg-gray-900">
+        <h1 class="text-3xl font-bold">
+        Hello <i>test</i> From Gradio Iframe
+        </h1>
+        <h3>Filename: 1678999939.html</h3>

static/output.html ADDED Viewed

	@@ -0,0 +1,44 @@

+<h1 class="p-name">Moroccan-Style Tomato Salad</h1>
+<p class="p-summary">A salad that's the perfect accompaniment to summer grills.</p>
+<h2>Ingredients</h2>
+<ul class="ingredient-list">
+  <li><span class="value">200g</span> tinned chickpeas</li>
+  <li><span class="value">1/2 tsp</span> ground cumin</li>
+  <li><span class="value">1/2 tsp</span> cayenne</li>
+  <li><span class="value">1/2 tsp</span> ground coriander</li>
+  <li>Extra-virgin olive oil</li>
+  <li><span class="value">1 kg</span> mixed ripe tomatoes</li>
+  <li><span class="value">1/2</span> cucumber</li>
+  <li><span class="value">4</span> spring onions</li>
+  <li><span class="value">1</span> green chilli</li>
+  <li><span class="value">1</span> small lemon</li>
+  <li><span class="value">1/2</span> small bunch of dill</li>
+  <li><span class="value">1/2</span> small bunch of coriander</li>
+</ul>
+<h2>Dressing</h2>
+<ul class="ingredient-list">
+  <li><span class="value">4 tbsp</span> extra-virgin olive oil</li>
+  <li><span class="value">1 tbsp</span> lemon juice (plus juice reserved from zested lemon)</li>
+  <li><span class="value">2-3 tsp</span> harissa</li>
+  <li><span class="value">2-3 tsp</span> balsamic vinegar</li>
+  <li><span class="value">1/2 tsp</span> sumac</li>
+</ul>
+<h2>Instructions</h2>
+<ol class="instruction-list">
+  <li>Preheat the oven to 190°C. Tip the chickpeas into a small roasting tin, add the cumin, cayenne, coriander and 1 tablespoon of olive oil, and season. Mix to coat the chickpeas in the spices, then roast in the oven for about 20 minutes, until golden and crisp.</li>
+  <li>Meanwhile, prepare the tomatoes, slicing the larger ones and cutting any cherry tomatoes into halves or quarters. Arrange on a large platter. Peel and thinly slice the cucumber, then tuck among the tomatoes. Trim and thinly slice the spring onions and chilli. Peel and finely slice half the lemon zest, then scrunch with a pinch of salt and a squeeze of lemon juice, then scatter over salad with spring onion and chilli. Roughly chop herbs and set aside.</li>
+  <li>To make dressing, combine extra-virgin olive oil with one tablespoon of lemon juice (from the zested lemon), harissa and vinegar and season well. Taste, adding more harissa or juice as needed. Scatter the herbs and toasted chickpeas over the salad, spoon over the dressing, sprinkle with the sumac and leave the salad to sit for 10 minutes, allowing the flavours to mingle, before serving.</li>
+</ol>
+<h2>Nutrition</h2>
+<ul class="nutrition-list">
+  <li><strong>Calories:</strong> 181</li>
+  <li><strong>Fat:</strong> 14.3g (2g sat fats)</li>
+  <li><strong>Protein:</strong> 2.5g</li>
+  <li><strong>Carbohydrates:</strong> 10.9g</li>
+  <li><strong>Sugar:</strong> 10.6g</li>
+  <li><strong>Sodium:</strong> 0.26g</li>
+  <li><strong>Fiber:</strong> 3.4g</li>
+</ul>
+<div class="p-note">Recipe source: adapted from BBC Good Food</div>