Add images and updates with proper LFS tracking

README.md

@@ -1,6 +1,5 @@
 ---
 title: Text Transformation Model
-emoji: 🚀
 colorFrom: purple
 colorTo: pink
 sdk: gradio
@@ -12,6 +11,8 @@ short_description: Single turn text transformation pattern
 
 # Text Transformation Model
 
+![Banner](banner.jpg)
+
 Pattern Space for in-out single-turn text transformation workflows based on a system prompt. 
 
 Mode of operation: user-defined system prompt + single-turn workflow definition concatenate to an enriched system prompt ensuring reliable single turn adherence. 

app.py

@@ -4,17 +4,6 @@ import os
 from typing import Optional, Tuple
 
 def transform_text(input_text: str, system_prompt: str, api_key: str) -> Tuple[str, str]:
-    """
-    Transform input text using OpenAI API with the provided system prompt.
-    
-    Args:
-        input_text: The text to transform
-        system_prompt: User-defined system prompt
-        api_key: OpenAI API key
-        
-    Returns:
-        Tuple of (output_text, cleared_input_text)
-    """
     if not api_key.strip():
         return "Error: Please provide your OpenAI API key.", input_text
     
@@ -25,17 +14,14 @@ def transform_text(input_text: str, system_prompt: str, api_key: str) -> Tuple[s
         return "Error: Please provide a system prompt.", input_text
     
     try:
-        # Initialize OpenAI client with user's API key
         client = openai.OpenAI(api_key=api_key.strip())
         
-        # Append workflow instruction to user's system prompt
         enhanced_system_prompt = f"""{system_prompt.strip()}
 
 IMPORTANT: This is a single-turn text transformation workflow interface. You must respond with the complete transformed text only, without any additional commentary, explanations, or formatting before or after the content."""
         
-        # Make API call
         response = client.chat.completions.create(
-            model="gpt-4o-mini",  # Using cost-effective model
+            model="gpt-4o-mini",
             messages=[
                 {"role": "system", "content": enhanced_system_prompt},
                 {"role": "user", "content": input_text.strip()}
@@ -45,8 +31,6 @@ IMPORTANT: This is a single-turn text transformation workflow interface. You mus
         )
         
         output_text = response.choices[0].message.content
-        
-        # Return output and clear input for next use
         return output_text, ""
         
     except openai.AuthenticationError:
@@ -59,10 +43,8 @@ IMPORTANT: This is a single-turn text transformation workflow interface. You mus
         return f"Error: {str(e)}", input_text
 
 def copy_to_clipboard(text: str) -> str:
-    """Return the text for copying (Gradio handles the clipboard functionality)"""
     return text
 
-# Custom CSS for better styling
 custom_css = """
 .main-container {
     max-width: 1200px;
@@ -122,25 +104,31 @@ with gr.Blocks(css=custom_css, title="Text Transformation Model", theme=gr.theme
             Single-Turn Text Transformer (In, Out)
         </h1>
         <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">
-          A pattern for simple system prompt defined single turn text transformations.
+          A pattern for simple form-based, system prompt defined, single turn text transformation UIs.
         </p>
     </div>
     """)
     
     with gr.Tabs():
         with gr.Tab("Transform Text"):
-            # API Key Section
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
+                    gr.Image(
+                        value="banner.jpg",
+                        show_label=False,
+                        show_download_button=False,
+                        interactive=False,
+                        container=False
+                    )
+                
+                with gr.Column(scale=2):
                     api_key_input = gr.Textbox(
                         label="OpenAI API Key",
                         placeholder="Enter your OpenAI API key (sk-...)",
                         type="password",
                         info="Your API key is stored locally in your browser for this session."
                     )
-             
-            with gr.Row():
-                with gr.Column():
+                    
                     system_prompt_input = gr.Textbox(
                         label="System Prompt",
                         placeholder="Enter your system prompt here (e.g., 'Translate the following text to French', 'Summarize this text in bullet points', etc.)",
@@ -148,7 +136,6 @@ with gr.Blocks(css=custom_css, title="Text Transformation Model", theme=gr.theme
                         info="Define how the AI should transform your input text. This prompt will be enhanced automatically for single-turn processing."
                     )
             
-            # Input/Output Section
             with gr.Row():
                 with gr.Column(scale=1):
                     input_text = gr.Textbox(
@@ -179,11 +166,10 @@ with gr.Blocks(css=custom_css, title="Text Transformation Model", theme=gr.theme
                         elem_classes=["copy-button"]
                     )
             
-            # Event handlers
             transform_btn.click(
                 fn=transform_text,
                 inputs=[input_text, system_prompt_input, api_key_input],
-                outputs=[output_text, input_text]  # Clear input after transformation
+                outputs=[output_text, input_text]
             )
             
             copy_btn.click(
@@ -194,46 +180,72 @@ with gr.Blocks(css=custom_css, title="Text Transformation Model", theme=gr.theme
         
         with gr.Tab("About"):
             gr.Markdown("""
-           ## Single Turn Text Transformer
+            ## Single Turn Text Transformer
             
             - By: [Daniel Rosehill](https://danielrosehill.com) (11-Sep-2025)
 
-            This Space provides a simple implementation of an extremely foundational but effective use for large language models (LLMs): taking a text and transforming it into something else using a sytsem prompt for guidance!
+            This Space provides a simple implementation of an extremely foundational but effective use for large language models (LLMs): taking a text and transforming it into something else using a system prompt for guidance!
 
-            I call this Space a "model" of a "pattern" because an almost limitless variety of simple UIs can be developed around this priciple by simply alternating the underlying system prompt (which in this demo is made editable with a short concatenated element). 
+            I call this Space a "model" of a "pattern" because an almost limitless variety of simple UIs can be developed around this principle by simply alternating the underlying system prompt (which in this demo is made editable with a short concatenated element). 
 
-            I call tools like these the great forgotten gems of the AI landscape: just as this AI use-case reached a high degree of stability, maturity, and cost-effectivenss it has already been lumped into the bucket of legacy tech. 
+            I call tools like these the great forgotten gems of the AI landscape: just as this AI use-case reached a high degree of stability, maturity, and cost-effectiveness it has already been lumped into the bucket of legacy tech. 
 
             ## What Do You Call An Assistant That's Not An Agent?
             
             Single turn text transformation tools like this (which lack, I argue, even a proper name!) are stateless and non-agentic and thus locked out of the glamorous agent landscape. They are single turn and non-conversational so are clearly not chatbots. At best, they might be described as "assistants" - to the extent that agents have not already usurped the term. But as assistants now connote something much more agentic, they might lack no matter name than "using AI to transform text."
 
-            Text transformers have vast application: they can be used to change the person or level of formality of text; to retsructure text from free-flowing formats into defined templates; or to clean up voice captured text, received from speech to text models, for downstream use in other systems. The model is very simple: the user prompt provides the text to be transformed and the system prompt provides the model with the desired transformation. The system prompt can also encapsulate few-shot examples to boost reliability. However, these workflows tend to execute well without even this safeguard.
+            Text transformers have vast application: they can be used to change the person or level of formality of text; to restructure text from free-flowing formats into defined templates; or to clean up voice captured text, received from speech to text models, for downstream use in other systems. The model is very simple: the user prompt provides the text to be transformed and the system prompt provides the model with the desired transformation. The system prompt can also encapsulate few-shot examples to boost reliability. However, these workflows tend to execute well without even this safeguard.
 
             ## "Lived Experience"
 
             I have implemented plenty of these. 
             
-            To provide one pedestrian example: I have an agent like this whose task is to depersonalise system prompts so that I can open source them without random users getting addressed as "Daniel" or assumed to also live in Jerusalem. The system prompt asks the agent to take my system prompt and remove it of any details unique to my life - replace 'Daniel' with 'the user', etc. It's a simple in-out workflow that can (of course) be scripted and run in batches and programatically but which is just as often more useful through a simple browser UI. And it doesn't get much simpler than a form in and form out!
+            To provide one pedestrian example: I have an agent like this whose task is to depersonalise system prompts so that I can open source them without random users getting addressed as "Daniel" or assumed to also live in Jerusalem. The system prompt asks the agent to take my system prompt and remove it of any details unique to my life - replace 'Daniel' with 'the user', etc. It's a simple in-out workflow that can (of course) be scripted and run in batches and programmatically but which is just as often more useful through a simple browser UI. And it doesn't get much simpler than a form in and form out!
 
             Other reasons why I love these tools:
 
-            - They leverage a very foundational and intended use of LLMs. This is not a frontier use or cojoling LLMs into doing something we hope might work. It was what they were designed for. If you share my conviction that tools usually are best at what they were built for, this one's a winner.
-            - They are forgiving. You don't need a model branded as having PhD level reasoning to get these to work reliably well. Hence, they are cheap. And a huge advantage of affordabilty: you can spend plenty of time working on great system prompting until you achieve the perfect desired type of text reformatting. 
-            - They are great, too, for just demonstrating the utility of AI away from the hype cycle. They do something that even the most advanced RegEx patterns cant'. They work great locally, too. 
+            - They leverage a very foundational and intended use of LLMs. This is not a frontier use or cajoling LLMs into doing something we hope might work. It was what they were designed for. If you share my conviction that tools usually are best at what they were built for, this one's a winner.
+            - They are forgiving. You don't need a model branded as having PhD level reasoning to get these to work reliably well. Hence, they are cheap. And a huge advantage of affordability: you can spend plenty of time working on great system prompting until you achieve the perfect desired type of text reformatting. 
+            - They are great, too, for just demonstrating the utility of AI away from the hype cycle. They do something that even the most advanced RegEx patterns can't. They work great locally, too. 
             - You just need a prompt: No tooling, no MCP integrations. Unless you're trying to transform encyclopedias in one go, they won't challenge the context window of modern models. In, out. 
+            """)
+        
+        with gr.Tab("Design"):
+            gr.Markdown("""
+            ## Prompt Design for Single Turn Adherence
+            
+            Effective prompt design patterns for non-JSON constrained prompting systems to ensure reliable single-turn text transformation workflows.
 
-
-
-
-            """, elem_id="about-content")
+            Instruction here: *IMPORTANT: This is a single-turn text transformation workflow interface. You must respond with the complete transformed text only, without any additional commentary, explanations, or formatting before or after the content.*
+            """)
+            
+            gr.Image(
+                value="design/1.png",
+                show_label=False,
+                show_download_button=False,
+                interactive=False,
+                width=600
+            )
+            
+            gr.Image(
+                value="design/2.png",
+                show_label=False,
+                show_download_button=False,
+                interactive=False,
+                width=600
+            )
+            
+            gr.Image(
+                value="design/3.png",
+                show_label=False,
+                show_download_button=False,
+                interactive=False,
+                width=600
+            )
     
-    # Add JavaScript for clipboard functionality and local storage
     gr.HTML("""
     <script>
-    // Local storage for API key and system prompt
     document.addEventListener('DOMContentLoaded', function() {
-        // Load saved API key and system prompt
         const savedApiKey = localStorage.getItem('openai_api_key');
         const savedSystemPrompt = localStorage.getItem('system_prompt');