Update app.py

app.py

@@ -14,12 +14,17 @@ processors = {
     "microsoft/Phi-3.5-vision-instruct": AutoProcessor.from_pretrained("microsoft/Phi-3.5-vision-instruct", trust_remote_code=True)
 }
 
-default_question = "You are an image to prompt converter. Your work is to observe each and every detail of the image and craft a detailed prompt under 100 words in this format: [image content/subject, description of action, state, and mood], [art form, style], [artist/photographer reference if needed], [additional settings such as camera and lens settings, lighting, colors, effects, texture, background, rendering]."
+DESCRIPTION = "[Phi-3.5-vision Demo](https://huggingface.co/microsoft/Phi-3.5-vision-instruct)"
+
+kwargs = {}
+kwargs['torch_dtype'] = torch.bfloat16
 
 user_prompt = '<|user|>\n'
 assistant_prompt = '<|assistant|>\n'
 prompt_suffix = "<|end|>\n"
 
+default_question = "You are an image to prompt converter. Your work is to observe each and every detail of the image and craft a detailed prompt under 100 words in this format: [image content/subject, description of action, state, and mood], [art form, style], [artist/photographer reference if needed], [additional settings such as camera and lens settings, lighting, colors, effects, texture, background, rendering]."
+
 @spaces.GPU
 def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-vision-instruct"):
     model = models[model_id]
@@ -40,53 +45,29 @@ def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-
     return response
 
 css = """
-  #container {
-    border: 2px solid #333;
-    padding: 20px;
-    max-width: 400px;
-    margin: auto;
+  #output {
+    height: 500px; 
+    overflow: auto; 
+    border: 1px solid #ccc; 
   }
-  #input_img, #output_text {
-    border: 1px solid #444;
-    border-radius: 5px;
-  }
-  #input_img {
-    height: 200px;
-    overflow: hidden;
-  }
-  #output_text {
-    height: 150px;
-    overflow-y: auto;
-  }
-  .copy-btn {
-    display: inline-block;
-    padding: 5px 10px;
-    font-size: 14px;
-    background-color: #333;
-    color: #fff;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-top: 10px;
+  #model_selector, #text_input { 
+    display: none !important; 
   }
 """
 
 with gr.Blocks(css=css) as demo:
-    with gr.Box(elem_id="container"):
-        input_img = gr.Image(label="Input Picture", elem_id="input_img")
-        text_input = gr.Textbox(value=default_question, visible=False)
-        submit_btn = gr.Button(value="Generate")
-        output_text = gr.Textbox(label="Output Text", elem_id="output_text")
-        
-        submit_btn.click(run_example, [input_img, text_input], [output_text])
-
-    def copy_to_clipboard(content):
-        import pyperclip
-        pyperclip.copy(content)
-        return "Text copied!"
+    gr.Markdown(DESCRIPTION)
+    with gr.Tab(label="Phi-3.5 Input"):
+        with gr.Row():
+            with gr.Column():
+                input_img = gr.Image(label="Input Picture")
+                model_selector = gr.Dropdown(choices=list(models.keys()), label="Model", value="microsoft/Phi-3.5-vision-instruct", visible=False)
+                text_input = gr.Textbox(label="Question", value=default_question, visible=False)
+                submit_btn = gr.Button(value="Submit")
+            with gr.Column():
+                output_text = gr.Textbox(label="Output Text")
 
-    copy_button = gr.Button("Copy Text", elem_id="copy-btn")
-    copy_button.click(copy_to_clipboard, inputs=output_text, outputs=None)
+        submit_btn.click(run_example, [input_img, text_input, model_selector], [output_text])
 
 demo.queue(api_open=False)
 demo.launch(debug=True, show_api=False)