Update app.py

app.py

@@ -14,15 +14,6 @@ processors = {
     "microsoft/Phi-3.5-vision-instruct": AutoProcessor.from_pretrained("microsoft/Phi-3.5-vision-instruct", trust_remote_code=True)
 }
 
-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
@@ -30,7 +21,7 @@ def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-
     model = models[model_id]
     processor = processors[model_id]
 
-    prompt = f"{user_prompt}<|image_1|>\n{text_input}{prompt_suffix}{assistant_prompt}"
+    prompt = f"<|user|>\n<|image_1|>\n{text_input}<|end|>\n<|assistant|>\n"
     image = Image.fromarray(image).convert("RGB")
 
     inputs = processor(prompt, image, return_tensors="pt").to("cuda:0")
@@ -45,29 +36,42 @@ def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-
     return response
 
 css = """
-  #output {
-    height: 500px; 
-    overflow: auto; 
-    border: 1px solid #ccc; 
+  .container {
+    border: 2px solid #333;
+    padding: 20px;
+    max-width: 400px;
+    margin: auto;
   }
-  #model_selector, #text_input { 
-    display: none !important; 
+  #input_img, #output_text {
+    border: 2px solid #333;
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+  }
+  .gr-button {
+    width: 100%;
+    margin-top: 10px;
+  }
+  #copy_button {
+    float: right;
+    margin-top: -30px;
+    cursor: pointer;
   }
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown(DESCRIPTION)
-    with gr.Tab(label="Phi-3.5 Input"):
+    with gr.Box(elem_id="container"):
+        input_img = gr.Image(label="Input Picture", elem_id="input_img", type="pil")
+        generate_button = gr.Button("Generate Prompt", elem_id="generate_button")
         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")
+            output_text = gr.Textbox(label="Output Text", elem_id="output_text", interactive=False)
+            copy_button = gr.Button("Copy", elem_id="copy_button")
+
+        # Copy functionality
+        copy_button.click(fn=lambda text: text, inputs=output_text, outputs=None)
 
-        submit_btn.click(run_example, [input_img, text_input, model_selector], [output_text])
+        # Generate functionality
+        generate_button.click(run_example, [input_img, default_question], [output_text])
 
 demo.queue(api_open=False)
 demo.launch(debug=True, show_api=False)