app.py

import gradio as gr
import os
import requests
import json

SYSTEM_PROMPT = "As an LLM, your job is to generate detailed prompts that start with generate the image, for image generation models based on user input. Be descriptive and specific, but also make sure your prompts are clear and concise."
TITLE = "Image Prompter"
EXAMPLE_INPUTS = [
    {"prompt": "A Reflective cat between stars.", "image_url": "https://www.bing.com/images/create/a-black-cat-with-a-shiny2c-reflective-coat-is-float/1-656c50e048424f578a489a4875acd14f?id=%2b0DNSc2C8Sw26e32dIzHZA%3d%3d&view=detailv2&idpp=genimg&idpclose=1&FORM=SYDBIC"},
    {"prompt": "A Stunning sunset over the mountains.", "image_url": "https://www.example.com/sunset_image.jpg"},
    {"prompt": "An Enchanted forest with fireflies.", "image_url": "https://www.example.com/forest_image.jpg"},
    {"prompt": "A Mysterious spaceship in the night sky.", "image_url": "https://www.example.com/spaceship_image.jpg"}
]

html_temp = """
<div style="display: flex; justify-content: space-between; padding: 10px;">
    <div>
        <img src='{image_url_1}' alt='Image 1' style='width:100px;height:100px;'>
        <p>{prompt_1}</p>
    </div>
    <div>
        <img src='{image_url_2}' alt='Image 2' style='width:100px;height:100px;'>
        <p>{prompt_2}</p>
    </div>
    <div>
        <img src='{image_url_3}' alt='Image 3' style='width:100px;height:100px;'>
        <p>{prompt_3}</p>
    </div>
    <div>
        <img src='{image_url_4}' alt='Image 4' style='width:100px;height:100px;'>
        <p>{prompt_4}</p>
    </div>
</div>
"""

zephyr_7b_beta = "https://api-inference.huggingface.co/models/HuggingFaceH4/zephyr-7b-beta/"

HF_TOKEN = os.getenv("HF_TOKEN")
HEADERS = {"Authorization": f"Bearer {HF_TOKEN}"}

def build_input_prompt(message, chatbot, system_prompt):
    input_prompt = "\n" + system_prompt + "</s>\n\n"
    for interaction in chatbot:
        input_prompt = input_prompt + str(interaction[0]) + "</s>\n\n" + str(interaction[1]) + "\n</s>\n\n"
    input_prompt = input_prompt + str(message) + "</s>\n"
    return input_prompt

def post_request_beta(payload):
    response = requests.post(zephyr_7b_beta, headers=HEADERS, json=payload)
    response.raise_for_status()
    return response.json()

def predict_beta(message, chatbot=[], system_prompt=""):
    input_prompt = build_input_prompt(message, chatbot, system_prompt)
    data = {"inputs": input_prompt}
    try:
        response_data = post_request_beta(data)
        json_obj = response_data[0]
        if 'generated_text' in json_obj and len(json_obj['generated_text']) > 0:
            bot_message = json_obj['generated_text']
            return bot_message
        elif 'error' in json_obj:
            raise gr.Error(json_obj['error'] + ' Please refresh and try again with smaller input prompt')
        else:
            warning_msg = f"Unexpected response: {json_obj}"
            raise gr.Error(warning_msg)
    except requests.HTTPError as e:
        error_msg = f"Request failed with status code {e.response.status_code}"
        raise gr.Error(error_msg)
    except json.JSONDecodeError as e:
        error_msg = f"Failed to decode response as JSON: {str(e)}"
        raise gr.Error(error_msg)

def test_preview_chatbot(message, history):
    response = predict_beta(message, history, SYSTEM_PROMPT)
    return response

# Create a Gradio custom component for image and prompt
class ImagePromptComponent(gr.Component):
    def __init__(self, image_url, prompt):
        self.image_url = image_url
        self.prompt = prompt
        super().__init__()

    def to_html(self):
        return f"""
        <div>
            <img src='{self.image_url}' alt='Image' style='width:100px;height:100px;'>
            <p>{self.prompt}</p>
        </div>
        """

# Generate instances of the custom component
image_prompt_components = [
    ImagePromptComponent(EXAMPLE_INPUTS[i]['image_url'], EXAMPLE_INPUTS[i]['prompt']) for i in range(4)
]

# Display HTML and launch the interface
gr.Interface(
    fn=test_preview_chatbot,
    live=False,
    examples=[[EXAMPLE_INPUTS[0]['prompt']]],
    inputs=image_prompt_components,
    outputs=gr.Textbox(),
    layout="vertical",
    html=html_temp.format(
        image_url_1=image_prompt_components[0].image_url,
        prompt_1=image_prompt_components[0].prompt,
        image_url_2=image_prompt_components[1].image_url,
        prompt_2=image_prompt_components[1].prompt,
        image_url_3=image_prompt_components[2].image_url,
        prompt_3=image_prompt_components[2].prompt,
        image_url_4=image_prompt_components[3].image_url,
        prompt_4=image_prompt_components[3].prompt,
    ),
).launch(share=True)