Spaces:

1vash
/

demo-flask-docker-template

Runtime error

App Files Files Community

Ivan Shelonik commited on Jun 12, 2023

Commit

be16e3e

1 Parent(s): 543f7b1

add: html,css,js

Browse files

Files changed (4) hide show

api_server.py +25 -6
static/script.js +30 -0
static/style.css +45 -0
templates/index.html +77 -0

api_server.py CHANGED Viewed

@@ -1,6 +1,13 @@
 import os
 import time
 import numpy as np
 from pathlib import Path
@@ -11,7 +18,7 @@ os.environ['TRANSFORMERS_CACHE'] = str(Path('./artifacts/').absolute())
 os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
 from tensorflow import keras
-from flask import Flask, jsonify, request
 load_type = 'remote_hub_from_pretrained'
 """
@@ -37,12 +44,13 @@ elif load_type == 'remote_hub_from_pretrained':
     model = from_pretrained_keras(REPO_ID, cache_dir='./artifacts/')
 elif load_type == 'remote_hub_pipeline':
     from transformers import pipeline
-    classifier = pipeline("image-classification", model=REPO_ID)
 else:
-    pass
 # Initialize the Flask application
 app = Flask(__name__)
 # API route for prediction
@@ -63,10 +71,20 @@ def predict():
             (Measures time only for ML operations preprocessing with predict)
     }
     """
     start_time = time.time()
     # Get the image data from the request
-    image_data = request.get_json()['image']
     # Preprocess the image
     processed_image = preprocess_image(image_data)
@@ -129,12 +147,13 @@ def version():
 @app.route("/")
 def hello_world():
-    return "<p>Hello, Team!</p>"
 # Start the Flask application
 if __name__ == '__main__':
-    app.run()
 ##################

+"""
+official fastapi HF example https://huggingface.co/docs/hub/spaces-sdks-docker-examples#docker-spaces-examples
+"""
 import os
 import time
 import numpy as np
+from PIL import Image
 from pathlib import Path
 os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
 from tensorflow import keras
+from flask import Flask, jsonify, request, render_template
 load_type = 'remote_hub_from_pretrained'
 """
     model = from_pretrained_keras(REPO_ID, cache_dir='./artifacts/')
 elif load_type == 'remote_hub_pipeline':
     from transformers import pipeline
+    model = pipeline("image-classification", model=REPO_ID)
 else:
+    raise AssertionError('No load type is specified!')
 # Initialize the Flask application
 app = Flask(__name__)
+# app = FastAPI()
 # API route for prediction
             (Measures time only for ML operations preprocessing with predict)
     }
     """
+    if 'image' not in request.files:
+        # Handle if no file is selected
+        return 'No file selected'
+    print('PRINT ME HERE', request)
     start_time = time.time()
+    file = request.files['image']
+    # Get pixels out of file
+    image_data = Image.open(file)
     # Get the image data from the request
+    # image_data = request.get_json()['image']
     # Preprocess the image
     processed_image = preprocess_image(image_data)
 @app.route("/")
 def hello_world():
+    return render_template("index.html")
+    # return "<p>Hello, Team!</p>"
 # Start the Flask application
 if __name__ == '__main__':
+    app.run(debug=True)
 ##################

static/script.js ADDED Viewed

	@@ -0,0 +1,30 @@

+//const textGenForm = document.querySelector('.text-gen-form');
+//
+//const translateText = async (text) => {
+//    const inferResponse = await fetch(`infer_t5?input=${text}`);
+//    const inferJson = await inferResponse.json();
+//
+//    return inferJson.output;
+//};
+//
+//textGenForm.addEventListener('submit', async (event) => {
+//  event.preventDefault();
+//
+//  const textGenInput = document.getElementById('text-gen-input');
+//  const textGenParagraph = document.querySelector('.text-gen-output');
+//
+//  try {
+//    textGenParagraph.textContent = await translateText(textGenInput.value);
+//  } catch (err) {
+//    console.error(err);
+//  }
+//});
+document.addEventListener("DOMContentLoaded", () => {
+  const uploadForm = document.querySelector(".image-upload-form");
+  const uploadButton = document.querySelector("#image-upload-submit");
+  uploadButton.addEventListener("click", () => {
+    uploadForm.submit();
+  });
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,45 @@

+body {
+  --text: hsl(0 0% 15%);
+  padding: 2.5rem;
+  font-family: sans-serif;
+  color: var(--text);
+}
+body.dark-theme {
+  --text: hsl(0 0% 90%);
+  background-color: hsl(223 39% 7%);
+}
+main {
+  max-width: 80rem;
+  text-align: center;
+}
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+a {
+  color: var(--text);
+}
+form {
+  width: 30rem;
+  margin: 0 auto;
+}
+input {
+  width: 100%;
+}
+button {
+  cursor: pointer;
+}
+.text-gen-output {
+  min-height: 1.2rem;
+  margin: 1rem;
+  border: 0.5px solid grey;
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,77 @@

+<!--<link rel="stylesheet" href="{{ url_for('static', filename='style.css', _external=True) }}" />-->
+<!--<script type="module" src="{{ url_for('static', filename='script.js', _external=True) }}"></script>-->
+<!--<!DOCTYPE html>-->
+<!--<html lang="en">-->
+<!--  <head>-->
+<!--    <meta charset="UTF-8" />-->
+<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+<!--    <title>Flask API</title>-->
+<!--    <link rel="stylesheet" href="style.css" />-->
+<!--    <script type="module" src="script.js"></script>-->
+<!--  </head>-->
+<!--  <body>-->
+<!--    <main>-->
+<!--      <section id="text-gen">-->
+<!--        <h1>Text generation using Flan T5</h1>-->
+<!--        <p>-->
+<!--          Model:-->
+<!--          <a-->
+<!--              href="https://huggingface.co/1vash/mnist_demo_model"-->
+<!--              rel="noreferrer"-->
+<!--              target="_blank"-->
+<!--            >1vash/mnist_demo_model</a-->
+<!--          >-->
+<!--        </p>-->
+<!--        <form class="text-gen-form">-->
+<!--          <label for="text-gen-input">Text prompt</label>-->
+<!--          <input-->
+<!--            id="text-gen-input"-->
+<!--            type="text"-->
+<!--            value="English: Translate There are many ducks. German:"-->
+<!--          />-->
+<!--          <button id="text-gen-submit">Submit</button>-->
+<!--          <p class="text-gen-output"></p>-->
+<!--        </form>-->
+<!--      </section>-->
+<!--    </main>-->
+<!--  </body>-->
+<!--</html>-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flask API</title>
+<!--    304 status codes indicate that the files are being cached by the browser. There is no error or issue to be concerned about in this case.-->
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+    <script type="module" src="{{ url_for('static', filename='script.js') }}"></script>
+<!--    <link rel="stylesheet" href="style.css" />-->
+<!--    <script type="module" src="script.js"></script>-->
+  </head>
+  <body>
+    <main>
+      <section id="text-gen">
+        <h1>Text generation using Flan T5</h1>
+        <p>
+          Model:
+          <a
+              href="https://huggingface.co/1vash/mnist_demo_model"
+              rel="noreferrer"
+              target="_blank"
+            >1vash/mnist_demo_model</a
+          >
+        </p>
+        <form class="image-upload-form" action="/predict" method="POST" enctype="multipart/form-data">
+          <label for="image-upload-input">Upload an image:</label>
+          <input id="image-upload-input" type="file" accept="image/*" name="image" />
+          <button id="image-upload-submit">Upload</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>