Upload app.py with huggingface_hub

app.py

@@ -19,12 +19,8 @@ replicate_token = os.getenv("REPLICATE_API_TOKEN")
 openai_api_key = os.getenv("OPENAI_API_KEY")
 
 # Funciones para comunicarse con OpenAI directamente a través de requests en lugar de usar el SDK
-def openai_chat_completion(prompt, model="gpt-4-turbo-preview", temperature=0.8, max_tokens=600):
+def openai_chat_completion(prompt, model="gpt-3.5-turbo", temperature=0.8, max_tokens=600):
     """Usa la API de OpenAI directamente a través de requests para evitar problemas con el SDK"""
-    
-    # Mostrar información para debugging
-    st.info(f"Usando clave de API: {openai_api_key[:5]}...{openai_api_key[-4:]}")
-    
     headers = {
         "Content-Type": "application/json",
         "Authorization": f"Bearer {openai_api_key}"
@@ -38,29 +34,21 @@ def openai_chat_completion(prompt, model="gpt-4-turbo-preview", temperature=0.8,
     }
     
     try:
-        # Imprimir información para depuración
-        st.write("Enviando solicitud a OpenAI...")
-        
-        # Imprimir payload para depuración (solo durante desarrollo)
-        st.json(payload)
-        
-        response = requests.post(
-            "https://api.openai.com/v1/chat/completions",
-            headers=headers,
-            json=payload,
-            timeout=60  # Aumentar timeout para evitar errores por tiempo
-        )
-        
-        st.write(f"Estado de respuesta: {response.status_code}")
-        
-        # Si hay un error, mostrar el detalle
-        if response.status_code != 200:
-            st.error(f"Error de API: {response.status_code} - {response.text}")
-            return None
+        with st.spinner("Generando historia personalizada..."):
+            response = requests.post(
+                "https://api.openai.com/v1/chat/completions",
+                headers=headers,
+                json=payload,
+                timeout=60  # Aumentar timeout para evitar errores por tiempo
+            )
             
-        response_data = response.json()
-        st.success("Respuesta recibida correctamente")
-        return response_data["choices"][0]["message"]["content"]
+            # Si hay un error, mostrar el detalle de forma discreta
+            if response.status_code != 200:
+                st.error("No se pudo generar la historia. Intenta de nuevo más tarde.")
+                return None
+                
+            response_data = response.json()
+            return response_data["choices"][0]["message"]["content"]
     except Exception as e:
         st.error(f"Error con la API de OpenAI: {str(e)}")
         return None
@@ -81,16 +69,23 @@ def openai_generate_image(prompt):
     }
     
     try:
-        response = requests.post(
-            "https://api.openai.com/v1/images/generations",
-            headers=headers,
-            json=payload
-        )
-        response.raise_for_status()
-        return response.json()["data"][0]["url"]
+        with st.spinner("Creando ilustración mágica..."):
+            response = requests.post(
+                "https://api.openai.com/v1/images/generations",
+                headers=headers,
+                json=payload,
+                timeout=60
+            )
+            
+            if response.status_code != 200:
+                st.error("No se pudo generar la ilustración. Se usará una imagen de muestra.")
+                return "https://via.placeholder.com/512x512.png?text=Imagen+No+Disponible"
+                
+            return response.json()["data"][0]["url"]
     except Exception as e:
-        st.error(f"Error generando imagen: {e}")
-        return None
+        # Error discreto sin mensajes técnicos
+        st.error("Ocurrió un problema al crear la ilustración.")
+        return "https://via.placeholder.com/512x512.png?text=Imagen+No+Disponible"
 
 # Optional TTS setup
 # Uncomment if using Google Cloud TTS
@@ -129,13 +124,6 @@ def generate_story(name: str, theme: str) -> str:
     # Format the prompt with user inputs
     prompt = prompt_template.format(name=name, theme=theme)
     
-    # Mostrar mensaje de carga
-    with st.spinner("Generando tu historia personalizada..."): 
-        # Información de depuración
-        st.write("Datos de entrada:")
-        st.write(f"- Protagonista: {name}")
-        st.write(f"- Tema: {theme}")
-    
     try:
         # Usar nuestra función personalizada que se comunica directamente con la API
         story = openai_chat_completion(prompt)
@@ -301,44 +289,124 @@ def generate_audio_tts(text: str, filename="narration.mp3") -> str:
 def set_custom_css():
     st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
     
     * {
-        font-family: 'Comic Neue', cursive;
+        font-family: 'Quicksand', sans-serif;
     }
     
     h1, h2, h3 {
-        color: #3366cc;
+        color: #6C63FF;
+        font-weight: 700;
+    }
+    
+    h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    h3 {
+        font-size: 1.5rem;
+        font-weight: 500;
+        opacity: 0.8;
+        margin-bottom: 2rem;
     }
     
     .stApp {
-        background-color: #f0f8ff;
+        background-color: #F8F9FA;
     }
     
     .stButton>button {
-        background-color: #ff9966;
+        background-color: #6C63FF;
         color: white;
-        font-weight: bold;
-        border-radius: 20px;
-        padding: 10px 20px;
+        font-weight: 600;
+        border-radius: 50px;
+        padding: 12px 24px;
         border: none;
+        transition: all 0.3s ease;
+        font-size: 16px;
+        box-shadow: 0 4px 6px rgba(108, 99, 255, 0.2);
     }
     
     .stButton>button:hover {
-        background-color: #ff7733;
+        background-color: #5A52E0;
+        transform: translateY(-2px);
+        box-shadow: 0 6px 10px rgba(108, 99, 255, 0.3);
+    }
+    
+    .stButton>button:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px rgba(108, 99, 255, 0.2);
+    }
+    
+    /* Colorful tabs for scenes */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 8px;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        background-color: #F0F0FF;
+        border-radius: 10px 10px 0 0;
+        padding: 8px 16px;
+        border: none;
+    }
+    
+    .stTabs [aria-selected="true"] {
+        background-color: #6C63FF !important;
+        color: white !important;
     }
     
+    /* Card-like containers for each scene */
     .scene-container {
         background-color: white;
-        padding: 20px;
-        border-radius: 15px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        margin-bottom: 20px;
+        padding: 24px;
+        border-radius: 16px;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.08);
+        margin-bottom: 24px;
+        border: 1px solid #f0f0f0;
     }
     
     .story-text {
         font-size: 18px;
-        line-height: 1.6;
+        line-height: 1.7;
+        color: #333;
+    }
+    
+    /* Improve sidebar appearance */
+    [data-testid="stSidebar"] > div:first-child {
+        background-color: #F9F7FF;
+        padding: 2rem 1rem;
+    }
+    
+    /* Error and success messages */
+    .element-container div[data-testid="stAlert"] {
+        border-radius: 10px;
+        padding: 12px;
+    }
+    
+    /* Input fields */
+    .stTextInput>div>div>input {
+        border-radius: 10px;
+        border: 2px solid #E0E0FF;
+        padding: 12px 16px;
+        font-size: 16px;
+    }
+    
+    .stTextInput>div>div>input:focus {
+        border-color: #6C63FF;
+        box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
+    }
+    
+    /* Slider styling */
+    .stSlider [data-baseweb="slider"] {
+        height: 6px;
+    }
+    
+    .stSlider [data-baseweb="thumb"] {
+        background-color: #6C63FF;
+        border-color: #6C63FF;
+        width: 20px;
+        height: 20px;
     }
     </style>
     """, unsafe_allow_html=True)