DEV Community: Lalo Morales

Kiro Hackathon !

Lalo Morales — Sat, 13 Sep 2025 21:54:23 +0000

Kiro is so rad. . .

I talked to it about an idea for a few minutes and it went to work.

Starts off with creating a design.md, requirements.md, and a tasks.md.

Those three files have everything Kiro agent needs to build the entire project.

User clicks on Start Task in the tasks.md for each task created which are linked back to the design and requirements files.

Autopilot is amazing, you have to initially grant permissions on each command but once it has them all, it works like a charm!

Once it's all finished, you run your app and make any necessary changes, but overall ... 10/10 experience.

kiro #kirorules!

Ready to build

Lalo Morales — Sun, 07 Sep 2025 03:40:42 +0000

Claude Code
Gemini CLI
OpenAI Codex

best way to code

Comic Book Movie Creator

Lalo Morales — Sun, 07 Sep 2025 03:39:55 +0000

Comic Book Movie Creator 🎬

An innovative web application that empowers anyone, especially children and creatives, to bring their stories to life as a personalized, multimodal "motion comic."

What I Built

The Comic Book Movie Creator solves two major challenges in AI-powered creation: the overwhelming "blank canvas" problem and the difficulty of maintaining visual consistency. It replaces creative friction with a fun, guided 6-step journey.

Users start with a simple spark of an idea—provided via text, voice, or even a drawing—and the app works with them to develop a consistent character, outline a story, generate a full 16-page comic book, and finally, animate key scenes into a finished video, complete with AI-generated narration.

It's an end-to-end "idea-to-premiere" pipeline that showcases the power of chaining multiple Google AI modalities into one seamless, creative experience.

Demo

Live App URL: https://comic-book-movie-creator-421841157537.us-west1.run.app

GitHub Repository: https://github.com/lalomorales22/comic-book-movie-creator

Check out the full video demonstration of the app in action below!

Youtube Link: https://youtu.be/6e4NRPcsCz0

How I Used Google AI Studio

Google AI Studio was the command center for this project's development and is the ideal environment for running it.

Prompt Engineering and Prototyping

I used the AI Studio's playground extensively to design and test the complex chain of prompts required for the 6-step journey. Each step's prompt was carefully crafted to take the output of the previous step as its input, ensuring a cohesive flow. For example, the approved character description from Step 2 becomes a critical part of the prompt for generating the 16 comic panels in Step 4.

Multimodal Model Integration

This project leverages a suite of powerful Google models, and AI Studio was perfect for experimenting with them:

Gemini 2.5 Flash: Chosen for its incredible speed and text capabilities. It powers the initial idea processing, the real-time storyboard chat, and the generation of all story text, ensuring the user experience is fluid and interactive.
Gemini 2.5 Flash Image: Used for all image generation tasks. Its quality and ability to adhere to detailed prompts were essential for creating the consistent Character Model Sheet and the 16 unique comic panels.
Veo 2.0: This state-of-the-art model is the magic behind Step 5. I used it to generate the 5-10 second video clips, bringing the user's static comic panels to life with dynamic animation.

Streamlined Deployment

The project is configured to be run directly from Google AI Studio, which seamlessly handles API key management via environment variables, making it incredibly easy for others to clone the repository and run it themselves.

Multimodal Features

The Comic Book Movie Creator is multimodal at its core, weaving together different AI capabilities to enhance the user experience at every step.

Flexible Creative Input (Speech/Image/Text → Text)

The journey begins with true multimodal flexibility. A child can upload a drawing, a writer can type a paragraph, and a storyteller can simply speak their idea. This accommodates different creative styles and makes the app accessible to a wider audience.

Consistent Character Generation (Text → Image)

The "Character Lab" is a key feature that solves a common AI problem. By first generating a definitive "Character Model Sheet" from the user's initial idea and getting approval, we ensure the main character looks consistent across all 16 comic panels, creating a believable and professional-looking story.

From Panel to Motion (Image + Text → Video)

This is the app's "wow" factor. The system takes a static, AI-generated comic panel (image) and its associated story text and uses Veo to create a short, animated video clip. This transforms the final product from a simple slideshow into a genuine "motion comic."

Automated Narration (Text → Speech)

In the final step, the generated story script for each panel is converted into audio using the browser's Web Speech API. This adds a final layer of modality, creating an immersive audio-visual experience where the user can watch and listen to the story they created.

hackathons

Lalo Morales — Sun, 07 Sep 2025 03:00:33 +0000

here i come!

import { ElevenLabsClient } from '@elevenlabs/elevenlabs-js';
import React, { useState } from 'react';

interface TextToSpeechComponentProps {
apiKey: string;
}

const TextToSpeechComponent: React.FC = ({ apiKey }) => {
const [text, setText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [audioUrl, setAudioUrl] = useState(null);

// Initialize ElevenLabs client
const elevenlabs = new ElevenLabsClient({
apiKey: apiKey,
});

const generateSpeech = async () => {
if (!text.trim()) return;

setIsLoading(true);

try {
  // Convert text to speech using your specific model ID
  const response = await elevenlabs.textToSpeech.convert('AvcDVzbaOUnXz0B27dGq', {
    text: text,
    modelId: 'eleven_multilingual_v2', // or another model like 'eleven_flash_v2_5'
    outputFormat: 'mp3_44100_128',
    voiceSettings: {
      stability: 0.5,
      similarityBoost: 0.75,
      style: 0.0,
      useSpeakerBoost: true,
      speed: 1.0,
    },
  });

  // Convert response to blob and create URL
  const chunks: Uint8Array[] = [];
  for await (const chunk of response) {
    chunks.push(chunk);
  }

  const audioBlob = new Blob(chunks, { type: 'audio/mpeg' });
  const url = URL.createObjectURL(audioBlob);
  setAudioUrl(url);

} catch (error) {
  console.error('Error generating speech:', error);
} finally {
  setIsLoading(false);
}

};

const playAudio = () => {
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
};

return (

value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Enter text to convert to speech..."
rows={4}
cols={50}
/>

  <div>
    <button 
      onClick={generateSpeech} 
      disabled={isLoading || !text.trim()}
    >
      {isLoading ? 'Generating...' : 'Generate Speech'}
    </button>

    {audioUrl && (
      <button onClick={playAudio}>
        Play Audio
      </button>
    )}
  </div>

  {audioUrl && (
    <audio controls src={audioUrl}>
      Your browser does not support the audio element.
    </audio>
  )}
</div>

);
};

export default TextToSpeechComponent;