commit

README.md

@@ -7,7 +7,13 @@ sdk: gradio
 sdk_version: 5.45.0
 app_file: app.py
 pinned: false
-short_description: Template UI for simple "in-out" text transformation jobs
+short_description: BYOK OpenAI-powered text transformation with custom system prompts
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Text Transformation Model
+
+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. 
+
+Overwriting text box and clipboard button for efficient manual repeat operation.

app.py

@@ -0,0 +1,270 @@
+import gradio as gr
+import openai
+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
+    
+    if not input_text.strip():
+        return "Error: Please provide input text to transform.", input_text
+    
+    if not system_prompt.strip():
+        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
+            messages=[
+                {"role": "system", "content": enhanced_system_prompt},
+                {"role": "user", "content": input_text.strip()}
+            ],
+            temperature=0.7,
+            max_tokens=4000
+        )
+        
+        output_text = response.choices[0].message.content
+        
+        # Return output and clear input for next use
+        return output_text, ""
+        
+    except openai.AuthenticationError:
+        return "Error: Invalid OpenAI API key. Please check your key and try again.", input_text
+    except openai.RateLimitError:
+        return "Error: Rate limit exceeded. Please try again later.", input_text
+    except openai.APIError as e:
+        return f"Error: OpenAI API error - {str(e)}", input_text
+    except Exception as e:
+        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;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.input-section, .output-section, .system-prompt-section {
+    margin-bottom: 20px;
+}
+
+.api-key-section {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    border-left: 4px solid #007bff;
+}
+
+.transform-button {
+    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.copy-button {
+    background: linear-gradient(45deg, #56ab2f 0%, #a8e6cf 100%);
+    border: none;
+    color: white;
+    font-weight: bold;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.warning-text {
+    color: #856404;
+    background-color: #fff3cd;
+    border: 1px solid #ffeaa7;
+    padding: 10px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+}
+"""
+
+# Create the Gradio interface
+with gr.Blocks(css=custom_css, title="Text Transformation Model", theme=gr.themes.Soft()) as app:
+    gr.HTML("""
+    <div style="text-align: center; margin-bottom: 30px;">
+        <h1 style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5em; margin-bottom: 10px;">
+            🚀 Text Transformation Model
+        </h1>
+        <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">
+            Transform your text using AI with custom system prompts and your own OpenAI API key
+        </p>
+    </div>
+    """)
+    
+    # API Key Section
+    with gr.Row():
+        with gr.Column():
+            gr.HTML('<div class="warning-text">⚠️ <strong>Privacy Notice:</strong> Your API key is stored locally in your browser and never sent to our servers.</div>')
+            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."
+            )
+    
+    # System Prompt Section
+    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.)",
+                lines=4,
+                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(
+                label="📝 Input Text",
+                placeholder="Paste or type your text here...",
+                lines=10,
+                info="Enter the text you want to transform"
+            )
+            
+            transform_btn = gr.Button(
+                "✨ Transform Text",
+                variant="primary",
+                size="lg",
+                elem_classes=["transform-button"]
+            )
+        
+        with gr.Column(scale=1):
+            output_text = gr.Textbox(
+                label="📤 Output Text",
+                lines=10,
+                info="Transformed text will appear here",
+                interactive=False
+            )
+            
+            copy_btn = gr.Button(
+                "📋 Copy Output",
+                variant="secondary",
+                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
+    )
+    
+    copy_btn.click(
+        fn=copy_to_clipboard,
+        inputs=[output_text],
+        outputs=[]
+    )
+    
+    # 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');
+        
+        if (savedApiKey) {
+            const apiKeyInput = document.querySelector('input[type="password"]');
+            if (apiKeyInput) apiKeyInput.value = savedApiKey;
+        }
+        
+        if (savedSystemPrompt) {
+            const systemPromptInputs = document.querySelectorAll('textarea');
+            if (systemPromptInputs.length > 0) {
+                systemPromptInputs[0].value = savedSystemPrompt;
+            }
+        }
+        
+        // Save API key and system prompt on change
+        document.addEventListener('input', function(e) {
+            if (e.target.type === 'password') {
+                localStorage.setItem('openai_api_key', e.target.value);
+            }
+            if (e.target.tagName === 'TEXTAREA' && e.target.placeholder.includes('system prompt')) {
+                localStorage.setItem('system_prompt', e.target.value);
+            }
+        });
+        
+        // Enhanced copy functionality
+        document.addEventListener('click', function(e) {
+            if (e.target.textContent.includes('Copy Output')) {
+                const outputTextarea = document.querySelectorAll('textarea');
+                const outputText = outputTextarea[outputTextarea.length - 1].value;
+                
+                if (outputText && !outputText.startsWith('Error:')) {
+                    navigator.clipboard.writeText(outputText).then(function() {
+                        // Visual feedback
+                        const originalText = e.target.textContent;
+                        e.target.textContent = '✅ Copied!';
+                        e.target.style.background = 'linear-gradient(45deg, #28a745 0%, #20c997 100%)';
+                        
+                        setTimeout(function() {
+                            e.target.textContent = originalText;
+                            e.target.style.background = 'linear-gradient(45deg, #56ab2f 0%, #a8e6cf 100%)';
+                        }, 2000);
+                    }).catch(function(err) {
+                        console.error('Could not copy text: ', err);
+                        alert('Copy failed. Please select and copy the text manually.');
+                    });
+                } else {
+                    alert('No valid output text to copy.');
+                }
+            }
+        });
+    });
+    </script>
+    """)
+    
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid #eee; color: #666;">
+        <p>💡 <strong>Tips:</strong></p>
+        <ul style="text-align: left; max-width: 600px; margin: 0 auto;">
+            <li>Your API key and system prompt are saved locally in your browser</li>
+            <li>Each transformation is a single API call - the input form clears automatically</li>
+            <li>Use specific system prompts for better results (e.g., "Translate to Spanish", "Summarize in 3 bullet points")</li>
+            <li>The AI will respond with only the transformed text, no additional commentary</li>
+        </ul>
+    </div>
+    """)
+
+if __name__ == "__main__":
+    app.launch()

requirements.txt

@@ -0,0 +1,2 @@
+gradio==5.45.0
+openai>=1.0.0