major changes

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -87,7 +87,7 @@ def generate_images(user_prompt, selected_models):
             )
             if response.status_code == 201:
                 response_json = response.json()
-                print(f"Response for model {model}: {response_json}")
+                print("Response JSON:", response_json)
                 # Handle OpenAI models differently (Aspect 2)
                 if model in ["dall-e-3", "dall-e-2"]:
                     if 'data' in response_json and 'url' in response_json['data'][0]:
@@ -130,64 +130,159 @@ model_list = [
     "dall-e-2",
 ]
 
-# Gradio Interface
-with gr.Blocks() as demo:
-    # Title and links
-    with gr.Row():
-        gr.Markdown("""
-            # Let's Generate Cutesy AI Sticker!
-            <p align="center">
-            <a title="Page" href="https://ai-sticker-maker.vercel.app/" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://img.shields.io/badge/Project-Website-pink?logo=googlechrome&logoColor=white">
-            </a>
-            <a title="arXiv" href="https://rebrand.ly/aistickermakerpaper" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://img.shields.io/badge/arXiv-Paper-b31b1b?logo=arxiv&logoColor=white">
-            </a>
-            <a title="Github" href="https://github.com/abdibrokhim/ai-sticker-maker" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://img.shields.io/github/stars/EnVision-Research/Lotus?label=GitHub%20%E2%98%85&logo=github&color=C8C" alt="badge-github-stars">
-            </a>
-            <a title="Social" href="https://x.com/abdibrokhim" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
-            </a>
-            <a title="Social" href="https://x.com/haodongli00/status/1839524569058582884" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
-            </a>
-            <br>
-            <strong>Please consider starring <span style="color: orange">&#9733;</span> the <a href="https://github.com/abdibrokhim/ai-sticker-maker" target="_blank" rel="noopener noreferrer">GitHub Repo</a> if you find this useful!</strong>
-        """)
-    with gr.Row():
-        with gr.Column(scale=1):
-            # Model selection
-            selected_models = gr.CheckboxGroup(
-                choices=model_list,
-                label="Select Image Generation Models",
-                value=["stable-diffusion-v35-large"]
+# Examples data as a list of dictionaries
+examples = [
+    {
+        'user_prompt': "An adorable kitten playing with a ball of yarn",
+        'enhanced_prompt': "An adorable, fluffy kitten with big, sparkling eyes and playful whiskers, tumbling around with a vibrant ball of yarn. The kitten's fur is a soft blend of warm creams and greys, giving it a cuddly, huggable appearance. Its expression is full of joy and mischief, with a tiny pink tongue playfully sticking out. The ball of yarn is a bright and cheerful red, unraveling with dynamic loops and curls. The style is chibi-like and sticker-friendly, with minimalistic lines and gentle shading. The background is a simple, soft pastel color with tiny floating paw prints, enhancing the cute and playful theme.",
+        'generated_image': "./generated-images/cat-and-yarn.jpeg",
+        'ai_model': "dall-e-3"
+    },
+    {
+        'user_prompt': "A cutesy cat eating ice cream under a rainbow",
+        'enhanced_prompt': "A playful, cartoonish cat with big, sparkling eyes and soft, rounded features, happily licking a colorful ice cream cone. The cat has fluffy fur, pastel colors—like soft cream, peach, or light gray—and tiny pink blush on its cheeks for added charm. It sits contentedly under a bright, arched rainbow with soft, blended hues. Small, floating sparkles and tiny hearts surround the cat and ice cream to add a touch of magic. The ice cream cone has multiple scoops in fun, bright colors like pink, blue, and mint green, making the whole scene feel adorable and sweet, perfect for a cute sticker!",
+        'generated_image': "./generated-images/cat-and-icecream.jpeg",
+        'ai_model': "dall-e-3"
+    },
+    {
+        'user_prompt': "A girl with short pink+black hair wearing a pink shirt.",
+        'enhanced_prompt': "An adorable chibi-style character with a soft, cozy look. She has a short, wavy bob hairstyle in gradient shades of gray with delicate highlights that sparkle. Her large, expressive brown eyes have a gentle shine, and her cheeks are lightly blushed, adding a touch of warmth. She wears an off-shoulder, cream-colored sweater, giving a relaxed and comforting vibe. The background is a soft pastel gradient in warm beige and cream tones, decorated with small, floating sparkles and star shapes for a magical effect. The overall style is cute, minimalist, and sticker-friendly.",
+        'generated_image': "./generated-images/girl-with-white-grey-hair.png",
+        'ai_model': "dall-e-3"
+    }
+]
+
+# Function to create an HTML table for the examples
+def create_examples_table(examples):
+    html = '<table style="width:100%; text-align:left; border-collapse: collapse;">'
+    # Table headers
+    html += '<tr>'
+    html += '<th style="border: 1px solid black; padding: 8px; width:20%;">User Prompt</th>'
+    html += '<th style="border: 1px solid black; padding: 8px; width:50%;">Enhanced Prompt</th>'
+    html += '<th style="border: 1px solid black; padding: 8px; width:20%;">Generated Image</th>'
+    html += '<th style="border: 1px solid black; padding: 8px; width:10%;">AI Model</th>'
+    html += '</tr>'
+    # Table rows
+    for example in examples:
+        html += '<tr>'
+        html += f'<td style="border: 1px solid black; padding: 8px; vertical-align: top;">{example["user_prompt"]}</td>'
+        html += f'<td style="border: 1px solid black; padding: 8px; vertical-align: top;">{example["enhanced_prompt"]}</td>'
+        # Read and encode the image
+        try:
+            with open(example["generated_image"], "rb") as image_file:
+                image_data = image_file.read()
+                encoded_image = base64.b64encode(image_data).decode('utf-8')
+            html += f'<td style="border: 1px solid black; padding: 8px; vertical-align: top;"><img src="data:image/jpeg;base64,{encoded_image}" alt="Generated Image" width="800"/></td>'
+        except Exception as e:
+            print(f"Error loading image {example['generated_image']}: {e}")
+            html += '<td style="border: 1px solid black; padding: 8px; vertical-align: top;">Image not available</td>'
+        html += f'<td style="border: 1px solid black; padding: 8px; vertical-align: top;">{example["ai_model"]}</td>'
+        html += '</tr>'
+    html += '</table>'
+    return html
+
+# Gradio Interface with styling and functionality
+with gr.Blocks(
+    css="""
+        #download {
+            height: 118px;
+        }
+        .slider .inner {
+            width: 5px;
+            background: #FFF;
+        }
+        .viewport {
+            aspect-ratio: 4/3;
+        }
+        .tabs button.selected {
+            font-size: 20px !important;
+            color: crimson !important;
+        }
+        h1, h2, h3 {
+            text-align: center;
+            display: block;
+        }
+        .md_feedback li {
+            margin-bottom: 0px !important;
+        }
+    """,
+) as demo:
+    gr.Markdown("""
+        # Let's Generate Cutesy AI Sticker!
+        <p align="center">
+        <a title="Page" href="https://ai-sticker-maker.vercel.app/" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://img.shields.io/badge/Project-Website-pink?logo=googlechrome&logoColor=white">
+        </a>
+        <a title="arXiv" href="https://rebrand.ly/aistickermakerpaper" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://img.shields.io/badge/arXiv-Paper-b31b1b?logo=arxiv&logoColor=white">
+        </a>
+        <a title="Github" href="https://github.com/abdibrokhim/ai-sticker-maker" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://img.shields.io/github/stars/EnVision-Research/Lotus?label=GitHub%20%E2%98%85&logo=github&color=C8C" alt="badge-github-stars">
+        </a>
+        <a title="Social" href="https://x.com/abdibrokhim" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
+        </a>
+        <a title="Social" href="https://x.com/haodongli00/status/1839524569058582884" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+            <img src="https://www.obukhov.ai/img/badges/badge-social.svg" alt="social">
+        </a>
+        <br>
+        <strong>Please consider starring <span style="color: orange">&#9733;</span> the <a href="https://github.com/abdibrokhim/ai-sticker-maker" target="_blank" rel="noopener noreferrer">GitHub Repo</a> if you find this useful!</strong>
+    """)
+
+    with gr.Tabs(elem_classes=["tabs"]):
+        with gr.TabItem("Generate Stickers"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    # Model selection
+                    selected_models = gr.CheckboxGroup(
+                        choices=model_list,
+                        label="Select Image Generation Models",
+                        value=["dall-e-3"]
+                    )
+                    # User prompt input
+                    user_prompt = gr.Textbox(
+                        placeholder="A girl with short pink hair wearing an oversize hoodie...",
+                        label="Enter your prompt here"
+                    )
+                    seed = gr.Number(
+                        label="Seed (optional)",
+                        value=0,
+                        minimum=0,
+                        maximum=999999999,
+                    )
+                    # Generate and Reset buttons
+                    with gr.Row():
+                        generate_button = gr.Button("Generate Images", variant="primary")
+                        reset_button = gr.Button("Reset")
+                with gr.Column(scale=2):
+                    # Outputs
+                    image_outputs = gr.Gallery(
+                        label="Generated Images",
+                        elem_id="gallery",
+                        columns=[3],
+                        rows=[1],
+                    )
+            # Event bindings
+            def on_click(user_prompt, selected_models):
+                images = generate_images(user_prompt, selected_models)
+                return images
+
+            generate_button.click(
+                fn=on_click,
+                inputs=[user_prompt, selected_models],
+                outputs=image_outputs
             )
-        with gr.Column(scale=2):
-            # User prompt input
-            # Example propt: a very cutesy panda sitting and easting a pink very creamy ice cream
-            user_prompt = gr.Textbox(
-                placeholder="A girl with short pink hair wearing an oversize hoodie...",
-                label="Enter your prompt here"
+            reset_button.click(
+                fn=lambda: ("", []),
+                inputs=[],
+                outputs=[user_prompt, selected_models],
+                queue=False,
             )
-            # Generate button
-            generate_button = gr.Button("Generate Images")
-
-    # Outputs
-    image_outputs = gr.Gallery(label="Generated Images", columns=[3], rows=[1], elem_id="gallery")
-
-    # Function to run on button click
-    def on_click(user_prompt, selected_models):
-        images = generate_images(user_prompt, selected_models)
-        # Filter out None values in case of errors
-        return [img for img in images if img is not None]
-
-    # Event binding
-    generate_button.click(
-        fn=on_click,
-        inputs=[user_prompt, selected_models],
-        outputs=image_outputs
-    )
 
-# Launch the Gradio app
-demo.launch()
+        with gr.TabItem("Examples"):
+            # Create and display the examples table
+            examples_html = create_examples_table(examples)
+            gr.HTML(examples_html)
+
+    # Launch the Gradio app
+    demo.launch()

instructions.txt

@@ -1,3 +1,4 @@
+*Note: commited intentionally for educational purposes
 
 Given the following code snippets, and the list of image generation models with example API requests.
 
@@ -438,4 +439,30 @@ placeholder = "A girl with short pink hair wearing a oversize hoodie..."
 
 # main()
 
-<|end_of_code_snippet|>
+<|end_of_code_snippet|>
+
+
+
+Refactor examples part. Follow this steps:
+1. make 4 columns: 1) user prompt, 2) enhanced prompt, 3) generated image, 4) ai model
+2. rewrite column labels also.
+3. better make dictionary for each entry. so i can easily add more examples.
+
+here is example table info:
+[entry 1:]
+user prompt: "An adorable kitten playing with a ball of yarn"
+enhanced prompt: "An adorable, fluffy kitten with big, sparkling eyes and playful whiskers, tumbling around with a vibrant ball of yarn. The kitten's fur is a soft blend of warm creams and greys, giving it a cuddly, huggable appearance. Its expression is full of joy and mischief, with a tiny pink tongue playfully sticking out. The ball of yarn is a bright and cheerful red, unraveling with dynamic loops and curls. The style is chibi-like and sticker-friendly, with minimalistic lines and gentle shading. The background is a simple, soft pastel color with tiny floating paw prints, enhancing the cute and playful theme."
+generated image: "./generated-images/cat-and-yarn.jpeg"
+ai model: "dall-e-3"
+
+[entry 2:]
+user prompt: "A cutesy cat eating ice cream under a rainbow"
+enhanced prompt: "A playful, cartoonish cat with big, sparkling eyes and soft, rounded features, happily licking a colorful ice cream cone. The cat has fluffy fur, pastel colors—like soft cream, peach, or light gray—and tiny pink blush on its cheeks for added charm. It sits contentedly under a bright, arched rainbow with soft, blended hues. Small, floating sparkles and tiny hearts surround the cat and ice cream to add a touch of magic. The ice cream cone has multiple scoops in fun, bright colors like pink, blue, and mint green, making the whole scene feel adorable and sweet, perfect for a cute sticker!"
+generated image: "./generated-images/cat-and-icecream.jpeg"
+ai model: "dall-e-3"
+
+[entry 3:]
+user prompt: "A girl with short pink+black hair wearing a pink shirt."
+enhanced prompt: "An adorable chibi-style character with a soft, cozy look. She has a short, wavy bob hairstyle in gradient shades of gray with delicate highlights that sparkle. Her large, expressive brown eyes have a gentle shine, and her cheeks are lightly blushed, adding a touch of warmth. She wears an off-shoulder, cream-colored sweater, giving a relaxed and comforting vibe. The background is a soft pastel gradient in warm beige and cream tones, decorated with small, floating sparkles and star shapes for a magical effect. The overall style is cute, minimalist, and sticker-friendly."
+generated image: "./generated-images/girl-with-white-grey-hair.png"
+ai model: "dall-e-3"

paper.txt

@@ -1,3 +1,5 @@
+*Note: commited intentionally for educational purposes
+
 [title]
 Text-to-Sticker: Leveraging Image Generation Models to generate AI stickers using simple Prompt Engineering techniques
 

systemPrompt.txt

@@ -1,3 +1,5 @@
+*Note: commited intentionally for educational purposes
+
 You are tasked with enhancing user prompts to generate clear, detailed, and creative descriptions for a sticker creation AI. The final prompt should be imaginative, visually rich, and aligned with the goal of producing a cute, stylized, and highly personalized sticker based on the user's input.
 
 Instructions: