Next.js Ollama TTS App

help me write a prompt for Cline to use in an IDE to write an application. It is for a next.js ollama application which takes inputed pictures and generates a sentence to go with each picture. Then it creates an interactive experience with the pictures and the sentence is read by TTS within the application so you can press play and it will read each sentence and show each picture

Here’s a solid Cline prompt to guide your IDE in building the Next.js + Ollama application: --- **Prompt:** _"Create a Next.js application that allows users to upload multiple images. For each uploaded image, the app generates a descriptive sentence using the Ollama API. The app then displays the images in an interactive carousel or slideshow. Each generated sentence is read aloud using a built-in TTS (text-to-speech) feature when the user presses a play button. The UI should be clean and intuitive, with a Next.js API route handling the Ollama image-to-text generation and TTS processing. Implement state management using React hooks, and ensure smooth transitions between images and audio playback."_ **Technical Requirements:** - **Framework:** Next.js (App Router preferred) - **Backend:** Next.js API routes for processing images via Ollama - **Frontend:** React with Tailwind CSS for styling - **State Management:** React hooks (useState, useEffect) - **Image Handling:** Users should be able to upload and preview images - **Text Generation:** Ollama model extracts a sentence per image - **TTS Integration:** Web Speech API or another library to read sentences aloud - **User Interaction:** Play button for TTS, slideshow navigation **Key Features:** - Users upload multiple images - Ollama generates a caption per image - Images and captions are displayed in a carousel/slideshow - A play button reads the captions aloud using TTS - Smooth transitions and animations between images --- This should guide Cline well in setting up your Next.js project! Want me to help refine it further? 🚀

instead also include the feature in the application where you can choose before it starts a persona to tell the story, a story teller and they all have different personalities which are described in the UI. Make everything artful and unique and weird and also clean and contemporary modern slick and responsive.

Here’s an enhanced Cline prompt incorporating the persona-driven storytelling and artistic, modern design: --- **Prompt:** _"Create a unique and artful Next.js application where users upload multiple images to generate an interactive, narrated story. Before starting, users select a **storyteller persona**, each with a distinct personality, voice, and storytelling style. The chosen persona describes each image in their own way using the Ollama API, generating a sentence per image. These sentences are then narrated through a TTS system. The UI should be an immersive, sleek, and responsive experience—modern yet weird, clean yet surreal, balancing elegance with creative chaos."_ ### **Core Features:** - **Persona Selection Before Story Starts** - Users choose from a set of pre-designed storyteller personas. - Each persona has a unique tone, vocabulary, and narration style (e.g., "The Melancholic Poet," "The Eccentric AI," "The Overly Dramatic Thespian," "The Cosmic Philosopher"). - Personas are visually represented with abstract, animated avatars and a brief description of their style. - **Image Upload & Generation** - Users upload multiple images. - The Ollama API generates a unique sentence per image based on the chosen persona’s style. - Images and captions are displayed in a **smooth, animated, interactive** gallery. - **TTS Narration with Playable Experience** - Pressing play triggers the persona’s TTS narration, reading the generated sentences with fitting prosody. - Users can pause, skip, or replay each image’s narration. - **Dynamic, Immersive UI & Experience** - **Artistic & Unconventional Yet Slick & Modern:** A fusion of avant-garde design with contemporary UI/UX principles. - **Fluid Animations & Transitions:** Every interaction should feel alive, with dynamic UI elements that respond organically. - **Dark & Light Mode:** Aesthetic themes that complement the surreal yet clean atmosphere. - **Minimalist, but expressive typography** to enhance each persona’s voice. - **Technology Stack:** - **Next.js (App Router preferred)** for front-end and API handling - **Ollama API** for image-to-text storytelling - **Web Speech API / ResponsiveVoice / SpeechSynthesis** for TTS - **Framer Motion / GSAP** for elegant animations - **Tailwind CSS** for styling --- This should steer Cline towards generating something that’s both **technically robust** and **creatively unique**. Let me know if you want me to fine-tune it further! 🚀