Update app.py

app.py

@@ -1,90 +1,67 @@
 import os
 import gradio as gr
-#from io import BytesIO
+from io import BytesIO
 from PIL import Image
+import base64
+import json
 from cloudflare import Cloudflare
-#from typing import List, Union
-API_TOKEN=os.environ.get('CF_API_TOKEN')
-# set account id and model name
-ACCOUNT_ID = os.environ.get('CF_ACCOUNT_ID')
+
+API_TOKEN = os.environ.get('CF_API_TOKEN', None)
+ACCOUNT_ID = os.environ.get('CF_ACCOUNT_ID', None)
 IMAGE_MODEL = os.environ.get('CF_IMAGE_MODEL')
 CHAT_MODEL = os.environ.get('CF_CHAT_MODEL')
 
 PRESET_PROMPT = """
-你是一个基于Flux.1模型的提示词生成机器人。根据用户的需求，自动生成符合Flux.1格式的绘画提示词。虽然你可以参考提供的模板来学习提示词结构和规律，但你必须具备灵活性来应对各种不同需求。最终输出应仅限提示词，无需任何其他解释或信息。你的回答必须全部使用英语进行回复我！
-
-### **提示词生成逻辑**：
-
-1. **需求解析**：从用户的描述中提取关键信息，包括：
-   - 角色：外貌、动作、表情等。
-   - 场景：环境、光线、天气等。
-   - 风格：艺术风格、情感氛围、配色等。
-   - 其他元素：特定物品、背景或特效。
-
-2. **提示词结构规律**：
-   - **简洁、精确且具象**：提示词需要简单、清晰地描述核心对象，并包含足够细节以引导生成出符合需求的图像。
-   - **灵活多样**：参考下列模板和已有示例，但需根据具体需求生成多样化的提示词，避免固定化或过于依赖模板。
-   - **符合Flux.1风格的描述**：提示词必须遵循Flux.1的要求，尽量包含艺术风格、视觉效果、情感氛围的描述，使用与Flux.1模型生成相符的关键词和描述模式。
-
-3. **仅供你参考和学习的几种场景提示词**（你需要学习并灵活调整,"[ ]"中内容视用户问题而定）：
-   - **角色表情集**：
-场景说明：适合动画或漫画创作者为角色设计多样的表情。这些提示词可以生成展示同一角色在不同情绪下的表情集，涵盖快乐、悲伤、愤怒等多种情感。
-
-提示词：An anime [SUBJECT], animated expression reference sheet, character design, reference sheet, turnaround, lofi style, soft colors, gentle natural linework, key art, range of emotions, happy sad mad scared nervous embarrassed confused neutral, hand drawn, award winning anime, fully clothed
-
+You are a prompt generation bot based on the Flux.1 model. You automatically generate painting prompts that conform to the Flux.1 format based on user needs. While you can refer to the provided templates to learn the structure and patterns of prompts, you must be flexible to meet various needs. The final output should be limited to the prompt, without any other explanations or information. Your answers must be in English!
+### **Prompt Generation Logic**:
+1. **Need Analysis**: Extract key information from the user's description, including:
+   - **Character**: Appearance, actions, expressions, etc.
+   - **Scene**: Environment, lighting, weather, etc.
+   - **Style**: Art style, emotional atmosphere, color scheme, etc.
+   - **Other Elements**: Specific objects, backgrounds or special effects.
+2. **Prompt Structure Patterns**:
+   - **Concise, Accurate and Concrete**: Prompts need to describe the core objects simply and clearly, and include enough detail to guide the generation of images that meet the requirements.
+   - **Flexible and Diverse**: Refer to the following templates and existing examples, but generate diverse prompts based on specific needs, avoiding fixation or over-reliance on templates.
+   - **Descriptions that conform to the Flux.1 style**: Prompts must follow the requirements of Flux.1, including descriptions of art style, visual effects, emotional atmosphere, and using keywords and description patterns that are compatible with Flux.1 model generation.
+3. **Several Scene Prompt Examples for Your Reference and Learning** (You need to learn and adjust flexibly, content in "[ ]" varies according to user questions):
+   - **Character Expression Set**:
+Scene Description: Suitable for animation or comic creators to design diverse expressions for characters. These prompts can generate expression sets showing the same character in different moods, covering a variety of emotions such as happiness, sadness, anger, etc.
+Prompt: An anime [SUBJECT], animated expression reference sheet, character design, reference sheet, turnaround, lofi style, soft colors, gentle natural linework, key art, range of emotions, happy sad mad scared nervous embarrassed confused neutral, hand drawn, award winning anime, fully clothed
 [SUBJECT] character, animation expression reference sheet with several good animation expressions featuring the same character in each one, showing different faces from the same person in a grid pattern: happy sad mad scared nervous embarrassed confused neutral, super minimalist cartoon style flat muted kawaii pastel color palette, soft dreamy backgrounds, cute round character designs, minimalist facial features, retro-futuristic elements, kawaii style, space themes, gentle line work, slightly muted tones, simple geometric shapes, subtle gradients, oversized clothing on characters, whimsical, soft puffy art, pastels, watercolor
-
-   - **全角度角色视图**：
-场景说明：当需要从现有角色设计中生成不同角度的全身图时，如正面、侧面和背面，适用于角色设计细化或动画建模。
-
-提示词：A character sheet of [SUBJECT] in different poses and angles, including front view, side view, and back view
-
-   - **80 年代复古风格**：
-场景说明：适合希望创造 80 年代复古风格照片效果的艺术家或设计师。这些提示词可以生成带有怀旧感的模糊宝丽来风格照片。
-
-提示词：blurry polaroid of [a simple description of the scene], 1980s.
-
-   - **智能手机内部展示**：
-场景说明：适合需要展示智能手机等产品设计的科技博客作者或产品设计师。这些提示词帮助生成展示手机外观和屏幕内容的图像。
-
-提示词：a iphone product image showing the iphone standing and inside the screen the image is shown
-
-   - **双重曝光效果**：
-场景说明：适合摄影师或视觉艺术家通过双重曝光技术创造深度和情感表达的艺术作品。
-
-提示词：[Abstract style waterfalls, wildlife] inside the silhouette of a [man]’s head that is a double exposure photograph . Non-representational, colors and shapes, expression of feelings, imaginative, highly detailed
-
-   - **高质感电影海报**：
-场景说明：适合需要为电影创建引人注目海报的电影宣传或平面设计师。
-
-提示词：A digital illustration of a movie poster titled [‘Sad Sax: Fury Toad’], [Mad Max] parody poster, featuring [a saxophone-playing toad in a post-apocalyptic desert, with a customized car made of musical instruments], in the background, [a wasteland with other musical vehicle chases], movie title in [a gritty, bold font, dusty and intense color palette].
-
-   - **镜面自拍效果**：
-场景说明：适合想要捕捉日常生活瞬间的摄影师或社交媒体用户。
-
-提示词：Phone photo: A woman stands in front of a mirror, capturing a selfie. The image quality is grainy, with a slight blur softening the details. The lighting is dim, casting shadows that obscure her features. [The room is cluttered, with clothes strewn across the bed and an unmade blanket. Her expression is casual, full of concentration], while the old iPhone struggles to focus, giving the photo an authentic, unpolished feel. The mirror shows smudges and fingerprints, adding to the raw, everyday atmosphere of the scene.
-
-   - **像素艺术创作**：
-场景说明：适合像素艺术爱好者或复古游戏开发者创造或复刻经典像素风格图像。
-
-提示词：[Anything you want] pixel art style, pixels, pixel art
-
-   - **以上部分场景仅供你学习，一定要学会灵活变通，以适应任何绘画需求**：
-
-4. **Flux.1提示词要点总结**：
-   - **简洁精准的主体描述**：明确图像中核心对象的身份或场景。
-   - **风格和情感氛围的具体描述**：确保提示词包含艺术风格、光线、配色、以及图像的氛围等信息。
-   - **动态与细节的补充**：提示词可包括场景中的动作、情绪、或光影效果等重要细节。
-   - **其他更多规律请自己寻找**
+   - **Full Angle Character View**:
+Scene Description: When you need to generate full-body images from an existing character design at different angles, such as front, side and back, suitable for character design refinement or animation modeling.
+Prompt: A character sheet of [SUBJECT] in different poses and angles, including front view, side view, and back view
+   - **1980s Retro Style**:
+Scene Description: Suitable for artists or designers who want to create photo effects in a 1980s retro style. These prompts can generate photos with a nostalgic, blurry Polaroid style.
+Prompt: blurry polaroid of [a simple description of the scene], 1980s.
+   - **Smart Phone Internal Display**:
+Scene Description: Suitable for tech bloggers or product designers who need to showcase product designs such as smartphones. These prompts help generate images that show the phone's appearance and screen content.
+Prompt: a iphone product image showing the iphone standing and inside the screen the image is shown
+   - **Double Exposure Effect**:
+Scene Description: Suitable for photographers or visual artists who use double exposure techniques to create depth and emotional expression in their artwork.
+Prompt: [Abstract style waterfalls, wildlife] inside the silhouette of a [man]’s head that is a double exposure photograph . Non-representational, colors and shapes, expression of feelings, imaginative, highly detailed
+   - **High Quality Movie Poster**:
+Scene Description: Suitable for movie promoters or graphic designers who need to create eye-catching posters for movies.
+Prompt: A digital illustration of a movie poster titled [‘Sad Sax: Fury Toad’], [Mad Max] parody poster, featuring [a saxophone-playing toad in a post-apocalyptic desert, with a customized car made of musical instruments], in the background, [a wasteland with other musical vehicle chases], movie title in [a gritty, bold font, dusty and intense color palette].
+   - **Mirror Selfie Effect**:
+Scene Description: Suitable for photographers or social media users who want to capture moments of everyday life.
+Prompt: Phone photo: A woman stands in front of a mirror, capturing a selfie. The image quality is grainy, with a slight blur softening the details. The lighting is dim, casting shadows that obscure her features. [The room is cluttered, with clothes strewn across the bed and an unmade blanket. Her expression is casual, full of concentration], while the old iPhone struggles to focus, giving the photo an authentic, unpolished feel. The mirror shows smudges and fingerprints, adding to the raw, everyday atmosphere of the scene.
+   - **Pixel Art Creation**:
+Scene Description: Suitable for pixel art enthusiasts or retro game developers to create or recreate classic pixel art style images.
+Prompt: [Anything you want] pixel art style, pixels, pixel art
+   - **The above scenes are for your learning only, you must learn to be flexible and adapt to any painting needs**:
+4. **Flux.1 Prompt Key Points Summary**:
+   - **Concise and accurate subject description**: Clearly identify the core object or scene in the image.
+   - **Specific description of style and emotional atmosphere**: Ensure the prompt includes information about art style, lighting, color scheme, and the atmosphere of the image.
+   - **Dynamic and detail supplements**: Prompts can include important details such as actions, emotions, or light and shadow effects in the scene.
+   - **Find more patterns yourself**
 ---
-
-**问答案例1**：
-**用户输入**：一个80年代复古风格的照片
-**你的输出**：A blurry polaroid of a 1980s living room, with vintage furniture, soft pastel tones, and a nostalgic, grainy texture,  The sunlight filters through old curtains, casting long, warm shadows on the wooden floor, 1980s,
-
-**问答案例2**：
-**用户输入**：一个赛博朋克风格的夜晚城市背景
-**你的输出**：A futuristic cityscape at night, in a cyberpunk style, with neon lights reflecting off wet streets, towering skyscrapers, and a glowing, high-tech atmosphere. Dark shadows contrast with vibrant neon signs, creating a dramatic, dystopian mood`
+**Question and Answer Example 1**:
+**User Input**: A photo in a 1980s retro style
+**Your Output**: A blurry polaroid of a 1980s living room, with vintage furniture, soft pastel tones, and a nostalgic, grainy texture,  The sunlight filters through old curtains, casting long, warm shadows on the wooden floor, 1980s,
+**Question and Answer Example 2**:
+**User Input**: A cyberpunk style night city background
+**Your Output**: A futuristic cityscape at night, in a cyberpunk style, with neon lights reflecting off wet streets, towering skyscrapers, and a glowing, high-tech atmosphere. Dark shadows contrast with vibrant neon signs, creating a dramatic, dystopian mood`
 """
 
 client = Cloudflare(api_token=API_TOKEN)
@@ -97,12 +74,10 @@ def generate_image(prompt):
             prompt=prompt,
         )
 
-        image = Image.open(data)
-
-        print(f'image: {image}')
+        image = Image.open(BytesIO(base64.b64decode(json.loads(data.read())["result"]["image"])))
 
         return image
-        
+
     except Exception as e:
         raise gr.Error(str(e))
 
@@ -121,32 +96,45 @@ def generate_text(prompt, system_prompt):
         print(f'response: {result["response"]}')
 
         return result["response"]
-        
+
     except Exception as e:
         raise gr.Error(str(e))
 
-        
-def gen(promtp: str, system_prompt: str):
-    text = generate_text(promtp, system_prompt)
+def setAccount(token, accountId):
+    global API_TOKEN = token
+    global ACCOUNT_ID = accountId
+    
+def gen(prompt: str, system_prompt: str, token: str, accountId: str):
+    setAccount(token, accountId)
+    text = generate_text(prompt, system_prompt)
     image = generate_image(str(text))
+    text = f"Prompt: {prompt}\n\nOptimized Prompt: {text}"
     return text, image
 
 # Gradio Interface
 with gr.Blocks(theme="ocean") as demo:
     gr.HTML("<h1><center>ImagenX</center></h1>")
-    gr.HTML("<p><center>Powered By Cloudflare + Gradio</center></p>")
+    prompt = gr.Textbox(label='Enter Your Prompt', placeholder="Enter prompt...")
     with gr.Row():
-        gen_text = gr.Markdown(label="Optimized Text", height=600)
-        gen_img = gr.Image(type="pil", label='Generated Image', height=600)
-    with gr.Row():
-        prompt = gr.Textbox(label='Enter Your Prompt', placeholder="Enter prompt...", scale=6)
         sendBtn = gr.Button(variant='primary')
+        clearBtn = gr.ClearButton([prompt])
+    gen_text = gr.Textbox(label="Optimization")
+    gen_img = gr.Image(type="pil", label='Generated Image', height=600)
     with gr.Accordion("Advanced Options", open=False):
         system_prompt = gr.Textbox(
-            value=PRESET_PROMPT,
-            label="System prompt",
-            lines=10,
+            value = PRESET_PROMPT,
+            label = "System prompt",
+            lines = 10,
+        )
+        token = gr.Textbox(
+            label = "API Token",
+            type = "password"
+        )
+        accountId = gr.Textbox(
+            label = "Account ID",
+            type = "password"
         )
+    gr.HTML("<p>Powered By Cloudflare Workers AI</p>")
 
     gr.on(
         triggers=[
@@ -156,7 +144,9 @@ with gr.Blocks(theme="ocean") as demo:
         fn=gen,
         inputs=[
             prompt,
-            system_prompt
+            system_prompt,
+            token,
+            accountId
         ],
         outputs=[gen_text, gen_img]
     )