Update app.py

app.py

@@ -16,12 +16,16 @@ processors = {
 
 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]."
 
+user_prompt = '<|user|>\n'
+assistant_prompt = '<|assistant|>\n'
+prompt_suffix = "<|end|>\n"
+
 @spaces.GPU
 def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-vision-instruct"):
     model = models[model_id]
     processor = processors[model_id]
 
-    prompt = f"<|user|>\n<|image_1|>\n{text_input}<|end|>\n<|assistant|>\n"
+    prompt = f"{user_prompt}<|image_1|>\n{text_input}{prompt_suffix}{assistant_prompt}"
     image = Image.fromarray(image).convert("RGB")
 
     inputs = processor(prompt, image, return_tensors="pt").to("cuda:0")
@@ -36,42 +40,53 @@ def run_example(image, text_input=default_question, model_id="microsoft/Phi-3.5-
     return response
 
 css = """
-  .container {
+  #container {
     border: 2px solid #333;
     padding: 20px;
     max-width: 400px;
     margin: auto;
   }
   #input_img, #output_text {
-    border: 2px solid #333;
-    width: 100%;
-    height: 300px;
-    object-fit: cover;
+    border: 1px solid #444;
+    border-radius: 5px;
   }
-  .gr-button {
-    width: 100%;
-    margin-top: 10px;
+  #input_img {
+    height: 200px;
+    overflow: hidden;
   }
-  #copy_button {
-    float: right;
-    margin-top: -30px;
+  #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;
   }
 """
 
 with gr.Blocks(css=css) as demo:
     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():
-            output_text = gr.Textbox(label="Output Text", elem_id="output_text", interactive=False)
-            copy_button = gr.Button("Copy", elem_id="copy_button")
+        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])
 
-        # Copy functionality
-        copy_button.click(fn=lambda text: text, inputs=output_text, outputs=None)
+    def copy_to_clipboard(content):
+        import pyperclip
+        pyperclip.copy(content)
+        return "Text copied!"
 
-        # Generate functionality
-        generate_button.click(run_example, [input_img, default_question], [output_text])
+    copy_button = gr.Button("Copy Text", elem_id="copy-btn")
+    copy_button.click(copy_to_clipboard, inputs=output_text, outputs=None)
 
 demo.queue(api_open=False)
 demo.launch(debug=True, show_api=False)