Gemini Multimodal Prompting - Kombinace Text, Obrázek a Kód

# Gemini Multimodal Prompting: Figma to React Workflow

## Optimální Prompt Struktura Pro Tuto Úlohu

### Základní Template

```markdown
I have a Figma design that I need to convert into React components. I'm providing:
1. Screenshots of the design (desktop and mobile versions)
2. Behavioral requirements in text
3. My existing component library code for reference

## VISUAL INPUT 1: Desktop Design
[Attach Figma screenshot - desktop version]

## VISUAL INPUT 2: Mobile Design
[Attach Figma screenshot - mobile version]

## TEXT INPUT: Requirements & Behavior

### Component: Product Card Grid
**Purpose:** Display product listings with filtering and sorting

**Behavior Requirements:**
- Grid layout: 4 columns desktop, 2 columns tablet, 1 column mobile
- Each card shows: product image, title, price, rating, "Add to Cart" button
- Hover state: slight elevation + scale effect
- Clicking card navigates to product detail page
- "Add to Cart" button: shows loading spinner during action
- Empty state: shows "No products found" message with illustration

**Interactions:**
- Filter by category (dropdown in header)
- Sort by: price (low to high), rating, newest
- Pagination: 20 items per page

### Component: Filter Sidebar
**Purpose:** Advanced filtering options

**Filters:**
- Price range slider (min: $0, max: $1000)
- Categories (multi-select checkboxes)
- Brands (searchable dropdown)
- Ratings (star rating selector)
- Availability (In Stock / Out of Stock toggle)

**Behavior:**
- Apply Filters button triggers search
- Clear All button resets all filters
- Active filters shown as removable chips below header

## CODE INPUT: Existing Component Library

```typescript
// components/ui/button.tsx
export interface ButtonProps {
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
size?: "default" | "sm" | "lg" | "icon";
// ... existing button component from shadcn/ui
}

// components/ui/card.tsx
export interface CardProps {
// ... existing card component
}

// components/ui/badge.tsx
export interface BadgeProps {
variant?: "default" | "secondary" | "destructive" | "outline";
// ... existing badge component
}

// utils/cn.ts
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```

## PROJECT CONTEXT

**Stack:**
- Next.js 14 with App Router
- React 18+ with Server Components
- TypeScript (strict mode)
- TailwindCSS for styling
- shadcn/ui component primitives
- Dark mode support (next-themes)

**Styling Constraints:**
- Use Tailwind utility classes (no custom CSS)
- Follow shadcn/ui patterns for consistency
- Support both light and dark themes
- Maintain existing design system colors

## ANALYSIS REQUIREMENTS

From the **desktop screenshot**, extract:
1. **Layout Structure:**
- Overall page layout (header, sidebar, main content)
- Grid system (columns, gaps)
- Sidebar width and positioning

2. **Typography:**
- Font sizes and weights for each text element
- Line heights and letter spacing
- Text colors in light mode

3. **Spacing:**
- Margins between sections
- Padding inside components
- Grid gaps
- Provide values in Tailwind classes (e.g., p-4, gap-6, mt-8)

4. **Colors:**
- Background colors
- Text colors
- Border colors
- Button colors (primary, secondary, hover states)
- Map to Tailwind's color palette or our custom theme

5. **Shadows & Borders:**
- Card elevation (shadow sizes)
- Border radius values
- Border widths

6. **Component States:**
- Hover effects (if visible in screenshot or describe expected)
- Active/Selected states
- Disabled states

From the **mobile screenshot**, extract:
- Responsive layout changes
- How components stack/reflow
- Mobile-specific interactions (if any)

## OUTPUT REQUIREMENTS

Generate the following files with complete, production-ready code:

### 1. `components/products/ProductCard.tsx`
- TypeScript React component
- Props interface defined
- Uses shadcn/ui primitives (Card, Button, Badge)
- Responsive design with Tailwind classes
- All states implemented (hover, loading, disabled)
- Accessible (proper ARIA labels)

### 2. `components/products/ProductGrid.tsx`
- Container for ProductCard grid
- Responsive grid layout (4/2/1 columns)
- Empty state handling
- Loading state with skeletons

### 3. `components/filters/FilterSidebar.tsx`
- Filter controls (price slider, checkboxes, dropdowns)
- Uses shadcn/ui form components
- Active filters display
- Clear/Apply buttons

### 4. `app/products/page.tsx`
- Next.js App Router page
- Server-side data fetching
- Client-side filtering integration
- Pagination

### 5. `components/products/ProductCard.stories.tsx`
- Storybook stories for visual testing
- Default, hover, loading, and error states

## ADDITIONAL INSTRUCTIONS

- **Extract exact spacing values** from screenshots and convert to Tailwind classes
- **Match colors precisely** - if not in default Tailwind palette, provide hex values for theme extension
- **Implement dark mode** - provide dark: variants for all color classes
- **Add TypeScript comments** explaining non-obvious design decisions
- **Follow Next.js 14 best practices** (Server Components where possible)
- **Ensure accessibility**: proper semantic HTML, ARIA labels, keyboard navigation

## BEGIN ANALYSIS AND GENERATION

Analyze the provided screenshots and generate all components with complete code.
```

---

## Proč Tato Prompt Struktura Funguje Pro Gemini?

### 1. **Jasné Oddělení Modalit**

Gemini funguje nejlépe, když každá modalita má jasně označenou sekci:
```markdown
## VISUAL INPUT 1: [popis]
[image/video]

## TEXT INPUT: [popis]
[text requirements]

## CODE INPUT: [popis]
```code
[existing code]
```
```

**Proč:**
- Gemini může lépe kontextualizovat každý input
- Jasné označení zamezuje confusion
- Usnadňuje cross-modal reasoning ("v obrázku vidím X, ale text říká Y")

### 2. **Explicitní Extrakční Instrukce**

Místo vágního "podívej se na tento screenshot", specificky řekněte:
```markdown
From the screenshot, extract:
1. **Layout Structure:** [what to look for]
2. **Typography:** [specific measurements]
3. **Spacing:** [provide in Tailwind classes]
4. **Colors:** [map to palette]
```

**Dopad:**
- Gemini ví přesně, na co se zaměřit v obrázku
- Výstup je strukturovaný a úplný
- Eliminuje nutnost opakovaných dotazů

### 3. **Cross-Modal Context Linking**

Spojte různé modality explicitními odkazy:
```markdown
**From the desktop screenshot (VISUAL INPUT 1), identify the card layout.**
**Use this layout structure to inform the React component architecture (CODE OUTPUT).**
**Apply the behavioral requirements (TEXT INPUT) to add interactivity.**
```

**Příklad:**
```
Screenshot shows 4-column grid (VISUAL)
↓
Text says "4 columns desktop, 2 tablet, 1 mobile" (TEXT)
↓
Generate responsive Tailwind classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" (CODE)
```

---

## Příprava Vizuálních Vstupů

### Screenshots

**✅ Vysoká Kvalita:**
- Rozlišení: minimálně 1920x1080 pro desktop, 375x812 pro mobile
- Formát: PNG (ne JPEG - ztráta detailů)
- Celá stránka: včetně všech stavů (hover, pokud možno)

**✅ Annotace (velmi užitečné):**

```
[Screenshot s anotacemi v editoru jako Figma/Sketch]

Červené šipky + text:
→ "24px padding"
→ "16px gap between items"
→ "bg-gray-100 (light mode)"
→ "rounded-lg (8px border radius)"
```

**✅ Multiple Views:**

Poskytněte různé pohledy/stavy:
```markdown
## VISUAL INPUT 1: Default State
[screenshot]

## VISUAL INPUT 2: Hover State
[screenshot s hoverem]

## VISUAL INPUT 3: Loading State
[screenshot loading spinneru]

## VISUAL INPUT 4: Error State
[screenshot error message]
```

**❌ Nekvalitní vstupy:**
- Low-res obrázky (pod 720p)
- Fotky obrazovky místo screenshotů
- Oříznuté screenshots bez kontextu
- Screenshots s overlays/modály, které zakrývají obsah

### Video Vstupy

**Kdy použít video místo screenshotu:**
- Animace & transitions
- Complex user flows
- Interactive element demonstrations

**Jak připravit video pro Gemini:**

1. **Krátká délka:** Max 2-3 minuty (Gemini má limit na video processing)
2. **Vysoká kvalita:** 1080p, 30fps minimum
3. **Narration/Captions:** Vysvětlujte, co video ukazuje
4. **Key Frames:** Pauzujte na důležitých momentech

**Video Prompt Template:**

```markdown
## VIDEO INPUT: User Interaction Flow

[Attach video: checkout-flow.mp4]

**Video Description:**
This 90-second video demonstrates the complete checkout flow:
- 0:00-0:15: User adds items to cart
- 0:15-0:30: Cart sidebar animation slides in from right
- 0:30-0:50: User proceeds to checkout, fills form
- 0:50-1:10: Payment method selection with smooth transitions
- 1:10-1:30: Order confirmation with success animation

**Extraction Requirements:**
From this video, analyze and extract:

1. **Animation Timings:**
- Cart sidebar slide-in duration
- Form field focus transitions
- Success checkmark animation timing

2. **Interaction Patterns:**
- How cart updates (instant vs. debounced)
- Form validation (inline vs. on-submit)
- Button loading states

3. **Layout Transitions:**
- How page changes between steps
- Component enter/exit animations
- Responsive behavior (if shown)

**Code Output:**
Generate React components with Framer Motion for animations, matching the timing and easing from the video.
```

---

## Kombinační Techniky Pro Různé Modality

### Technika 1: "Screenshot → Specification → Code"

**Flow:**
1. Screenshot poskytuje vizuální design
2. Text specifikuje chování
3. Existing code poskytuje constraints
4. Gemini generuje final code

**Prompt Pattern:**
```markdown
## Step 1: Analyze Screenshot
[screenshot]
Extract visual design (colors, spacing, typography)

## Step 2: Apply Text Requirements
[text requirements]
Add interactive behavior, state management, data flow

## Step 3: Integrate Existing Code
[existing component library]
Use these components, follow these patterns

## Step 4: Generate Final Code
Combine all inputs into production-ready React components
```

### Technika 2: "Video → Documentation"

**Use Case:** Převod video tutoriálu na written documentation

**Prompt:**
```markdown
## VIDEO INPUT: Tutorial on Setting Up Authentication

[Attach video: auth-setup-tutorial.mp4]

**Video Overview:**
15-minute screencast showing step-by-step setup of NextAuth.js in Next.js app.

**Documentation Requirements:**
Generate comprehensive written tutorial with:

1. **Text Transcription:**
- Convert spoken content to written steps
- Add code snippets where presenter types code
- Include CLI commands shown in terminal

2. **Screenshot Extraction:**
- Identify key moments (configuration screens, success messages)
- Suggest where static screenshots would be helpful in docs

3. **Code Blocks:**
- Extract all code shown in video
- Format with syntax highlighting
- Add comments explaining each section

4. **Troubleshooting Section:**
- Note any errors/warnings shown in video
- Document how presenter solved them

**Output Format:**
Markdown documentation file ready for publishing to docs site.
```

### Technika 3: "Diagram → Implementation"

**Use Case:** Database schema diagram → SQL/ORM kód

**Prompt:**
```markdown
## IMAGE INPUT: Database Schema Diagram

[Attach diagram: database-schema.png]

**Diagram Description:**
Entity-Relationship diagram showing:
- 5 tables: users, products, orders, order_items, reviews
- Relationships marked with crow's foot notation
- Primary/foreign keys indicated

**Code Generation Requirements:**

### 1. Analyze Diagram
Extract from the image:
- Table names and column names
- Data types (if visible or infer)
- Primary keys and foreign keys
- Relationships (one-to-many, many-to-many)
- Constraints (unique, not null, etc.)

### 2. Generate Prisma Schema
```prisma
// Generate complete Prisma schema file based on diagram
model User {
// ... fields extracted from diagram
}

model Product {
// ... fields extracted from diagram
}

// ... remaining models
```

### 3. Generate TypeScript Types
```typescript
// TypeScript interfaces matching the schema
export interface User {
// ...
}

export interface Product {
// ...
}
```

### 4. Generate Migrations
```sql
-- SQL migration file to create tables
CREATE TABLE users (
-- ... columns from diagram
);

-- ... remaining tables
```

**Additional Analysis:**
- Identify potential indexing needs based on relationships
- Suggest optimizations (e.g., "orders.user_id should be indexed")
- Flag any ambiguities in the diagram that need clarification
```

### Technika 4: "Multi-Image Comparison"

**Use Case:** Before/After redesign → Migration guide

**Prompt:**
```markdown
## VISUAL INPUT 1: Current Design (Before)
[screenshot-old-design.png]

## VISUAL INPUT 2: New Design (After)
[screenshot-new-design.png]

**Comparison Analysis Required:**

### 1. Visual Diff
Compare the two screenshots and identify:
- **Layout Changes:**
- What moved? (header, sidebar, content)
- New components added
- Components removed

- **Styling Changes:**
- Color palette differences
- Typography changes (fonts, sizes)
- Spacing adjustments
- New visual effects (shadows, borders)

- **Component Changes:**
- Buttons: style, size, placement
- Forms: layout, field types
- Cards: design, information hierarchy

### 2. Migration Code Generation

Based on the differences, generate:

#### A. Component Update Guide
```markdown
# Migration Guide: Old Design → New Design

## Button Component Changes

**Before (OLD DESIGN):**
```tsx
<Button className="bg-blue-500 px-4 py-2 rounded">
Click Me
</Button>
```

**After (NEW DESIGN):**
```tsx
<Button className="bg-blue-600 px-6 py-3 rounded-lg shadow-md">
Click Me
</Button>
```

**Changes:**
- Background color: blue-500 → blue-600 (darker)
- Padding: px-4 py-2 → px-6 py-3 (larger)
- Border radius: rounded → rounded-lg (more rounded)
- Added shadow-md for elevation

... [repeat for all component changes]
```

#### B. Global Style Updates
```css
/* Theme variable changes */
:root {
/* OLD: --primary: #3b82f6 */
--primary: #2563eb; /* NEW: darker blue */

/* NEW: Added shadow variables */
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}
```

#### C. Component Refactoring Checklist
- [ ] Update Button component padding
- [ ] Change primary color across app
- [ ] Add shadows to Card components
- [ ] Update header layout
- [ ] ... [rest of checklist based on diff]

### 3. Breaking Changes Detection

Flag any changes that might break existing functionality:
```markdown
## ⚠️ Breaking Changes

1. **Button size increase** may cause layout issues in tight spaces
- Check: Navigation bar, form buttons, modals
- Action: Review responsive breakpoints

2. **Card shadow addition** increases component size
- Check: Grid layouts, overlapping elements
- Action: Adjust spacing if needed
```
```

---

## Best Practices Pro Multimodální Prompting

### 1. **Prioritizace Modalit**

Ne všechny modality jsou stejně důležité. Explicitně řekněte, co je primary:

```markdown
## INPUT PRIORITY

**PRIMARY INPUT:** Screenshot (VISUAL INPUT 1)
- Use this as source of truth for visual design

**SECONDARY INPUT:** Text requirements (TEXT INPUT)
- Use to add behavior not visible in screenshot

**REFERENCE INPUT:** Existing code (CODE INPUT)
- Use patterns, but adapt to screenshot design if conflicts
```

### 2. **Disambiguace Konfliktů**

Co když různé modality konfliktují?

```markdown
## CONFLICT RESOLUTION RULES

If screenshot and text requirements conflict:
- **Layout/Spacing:** Follow screenshot
- **Behavior/Logic:** Follow text
- **Colors:** Follow screenshot (assume text description may be outdated)

Example:
- Screenshot shows 3-column grid
- Text says "4 columns"
→ **Use 3 columns** (screenshot is newer design)

If you detect conflicts, **FLAG THEM** in output:
```markdown
## ⚠️ Detected Conflict
- Screenshot: 3 columns
- Text: "4 columns"
- **Resolution:** Using 3 columns from screenshot
- **Recommendation:** Update text requirement to match design
```
```

### 3. **Iterativní Multimodal Flow**

Pro komplexní úlohy rozdělejte do fází:

**Fáze 1: Visual Analysis**
```markdown
## Phase 1: Analyze Screenshot Only

[screenshot]

Extract and document:
- Layout structure (grid, flexbox patterns)
- Component hierarchy
- Visual design (colors, typography, spacing)

OUTPUT: JSON structure describing the design:
```json
{
"layout": {
"type": "grid",
"columns": { "mobile": 1, "tablet": 2, "desktop": 4 },
"gap": "1.5rem"
},
"components": [
{
"name": "ProductCard",
"dimensions": { "width": "100%", "height": "auto" },
"children": [
{ "name": "Image", "aspectRatio": "16:9" },
{ "name": "Title", "fontSize": "1.125rem", "fontWeight": "600" },
...
]
}
],
"colors": {
"background": "#ffffff",
"primary": "#2563eb",
...
}
}
```
```

**Fáze 2: Add Behavior**
```markdown
## Phase 2: Enhance with Text Requirements

**Visual Design (from Phase 1):**
[JSON from previous output]

**Text Requirements:**
[behavioral requirements]

**Task:** Merge visual design with behavior requirements.

OUTPUT: Enhanced JSON with interactive states:
```json
{
...previous JSON...,
"interactions": {
"ProductCard": {
"hover": { "transform": "scale(1.02)", "shadow": "lg" },
"click": { "action": "navigate", "target": "/product/:id" }
},
"AddToCartButton": {
"click": { "action": "addToCart", "loadingState": true }
}
}
}
```
```

**Fáze 3: Generate Code**
```markdown
## Phase 3: Generate React Components

**Design Specification (from Phase 2):**
[Enhanced JSON]

**Existing Component Library:**
```typescript
[existing code]
```

**Task:** Generate production-ready React components.

OUTPUT: Complete TypeScript/React code files.
```

### 4. **Reference Anchors**

V multimodálních promptech používejte anchors pro cross-referencing:

```markdown
## VISUAL INPUT 1: Desktop Layout {#desktop-layout}
[screenshot]

## VISUAL INPUT 2: Mobile Layout {#mobile-layout}
[screenshot]

## TEXT REQUIREMENTS

### Responsive Behavior
- **Desktop:** As shown in {#desktop-layout}
- **Mobile:** As shown in {#mobile-layout}
- **Tablet:** Hybrid between desktop and mobile
- Use 2-column grid (not shown in screenshots)
- Keep mobile navigation pattern from {#mobile-layout}
- Use desktop card design from {#desktop-layout}

### Component: Navigation Bar
- **Desktop version** (see {#desktop-layout}):
- Horizontal navigation, logo left, links center, CTA right
- **Mobile version** (see {#mobile-layout}):
- Hamburger menu, logo centered
```

---

## Příklady Výstupů Při Různých Kombinacích

### Kombinace 1: Screenshot + Requirements → React Component

**Input:**
- Screenshot: E-commerce product card
- Text: "Should have add to cart button, wishlist icon, hover effect"

**Expected Output:**
```typescript
// components/ProductCard.tsx
import { useState } from 'react';
import { ShoppingCart, Heart } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import Image from 'next/image';

interface ProductCardProps {
id: string;
name: string;
price: number;
image: string;
rating: number;
onAddToCart: (id: string) => void;
onToggleWishlist: (id: string) => void;
isInWishlist?: boolean;
}

export function ProductCard({
id,
name,
price,
image,
rating,
onAddToCart,
onToggleWishlist,
isInWishlist = false
}: ProductCardProps) {
const [isHovered, setIsHovered] = useState(false);
const [isAddingToCart, setIsAddingToCart] = useState(false);

const handleAddToCart = async () => {
setIsAddingToCart(true);
await onAddToCart(id);
setIsAddingToCart(false);
};

return (
<Card
className={cn(
// Base styles extracted from screenshot
"relative overflow-hidden rounded-lg border border-gray-200",
"transition-all duration-300",
// Hover effect from requirements
isHovered && "shadow-lg scale-[1.02]"
)}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<CardContent className="p-0">
{/* Image Container - aspect ratio from screenshot: 4:3 */}
<div className="relative aspect-[4/3] w-full overflow-hidden bg-gray-100">
<Image
src={image}
alt={name}
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
/>

{/* Wishlist Button - positioned top-right per screenshot */}
<Button
variant="ghost"
size="icon"
className={cn(
"absolute right-2 top-2 bg-white/80 backdrop-blur-sm hover:bg-white",
isInWishlist && "text-red-500"
)}
onClick={(e) => {
e.stopPropagation();
onToggleWishlist(id);
}}
aria-label={isInWishlist ? "Remove from wishlist" : "Add to wishlist"}
>
<Heart className={cn("h-5 w-5", isInWishlist && "fill-current")} />
</Button>
</div>

{/* Content - spacing from screenshot: p-4 */}
<div className="p-4 space-y-3">
{/* Product Name - typography from screenshot */}
<h3 className="font-semibold text-lg text-gray-900 line-clamp-2">
{name}
</h3>

{/* Rating - extracted from screenshot */}
<div className="flex items-center gap-1">
{Array.from({ length: 5 }).map((_, i) => (
<svg
key={i}
className={cn(
"h-4 w-4",
i < Math.floor(rating) ? "text-yellow-400 fill-current" : "text-gray-300"
)}
viewBox="0 0 20 20"
>
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
))}
<span className="text-sm text-gray-600 ml-1">
({rating.toFixed(1)})
</span>
</div>

{/* Price - typography from screenshot: text-2xl font-bold */}
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-gray-900">
${price.toFixed(2)}
</span>
</div>

{/* Add to Cart Button - from requirements, styled per screenshot */}
<Button
onClick={handleAddToCart}
disabled={isAddingToCart}
className="w-full"
size="lg"
>
{isAddingToCart ? (
<>
<span className="animate-spin mr-2">⏳</span>
Adding...
</>
) : (
<>
<ShoppingCart className="mr-2 h-5 w-5" />
Add to Cart
</>
)}
</Button>
</div>
</CardContent>
</Card>
);
}
```

**Design Decisions Extracted:**
```markdown
## Visual Design Extraction (from screenshot)

### Layout
- Card: rounded-lg, border-gray-200
- Image aspect ratio: 4:3 (measured from screenshot)
- Content padding: 16px (p-4)
- Vertical spacing: 12px (space-y-3)

### Typography
- Product name: text-lg (18px), font-semibold (600), line-clamp-2
- Price: text-2xl (24px), font-bold (700)
- Rating: text-sm (14px), text-gray-600

### Colors
- Background: white
- Text: gray-900 (primary), gray-600 (secondary)
- Primary action (button): default blue from theme
- Wishlist active: red-500
- Border: gray-200

### Spacing (all values from screenshot measurement)
- Card padding: 16px
- Image corners: 8px border-radius
- Button height: 44px (lg size)
- Gap between elements: 12px

### Interactive States (from requirements + screenshot)
- Hover: scale-[1.02] + shadow-lg
- Loading: spinner + "Adding..." text
- Wishlist toggle: filled heart icon
```

---

### Kombinace 2: Video + Code → Documentation

**Input:**
- Video: 10-minute tutorial on API integration
- Existing code: API client library

**Expected Output:**

```markdown
# API Integration Guide: Payment Gateway

*Generated from video tutorial: payment-integration-tutorial.mp4*

## Overview

This guide walks through integrating our payment gateway API into your application.
Based on the video demonstration, we'll cover authentication, making payment requests,
and handling webhooks.

## Prerequisites

```typescript
// Install the SDK (shown at 0:15 in video)
npm install @paymentgateway/sdk

// Import the client (shown at 0:30)
import { PaymentClient } from '@paymentgateway/sdk';
```

## Step 1: Initialize the Client (Video: 0:45-1:30)

In the video, the presenter sets up the client with API keys:

```typescript
// config/payment.ts
import { PaymentClient } from '@paymentgateway/sdk';

// Initialize with your API keys
// NOTE: Never commit API keys! Use environment variables (video: 1:10)
export const paymentClient = new PaymentClient({
apiKey: process.env.PAYMENT_API_KEY, // Public key
secretKey: process.env.PAYMENT_SECRET_KEY, // Secret key
environment: process.env.NODE_ENV === 'production' ? 'live' : 'sandbox'
});

// Test the connection (video: 1:20)
paymentClient.testConnection()
.then(() => console.log('✓ Payment gateway connected'))
.catch(err => console.error('✗ Connection failed:', err));
```

**Video Note (1:15):** The presenter emphasizes keeping secret keys server-side only.
Never expose `PAYMENT_SECRET_KEY` to the frontend.

## Step 2: Create a Payment Intent (Video: 2:00-4:30)

The video shows two approaches for creating payment intents:

### Approach A: Simple Payment (Video: 2:15-3:00)

For basic one-time payments:

```typescript
// routes/api/create-payment.ts
import { paymentClient } from '@/config/payment';

export async function POST(request: Request) {
const { amount, currency } = await request.json();

try {
// Create payment intent (video: 2:30)
const paymentIntent = await paymentClient.createPaymentIntent({
amount: amount * 100, // Convert to cents (video: 2:45)
currency: currency || 'usd',
metadata: {
orderId: generateOrderId()
}
});

// Return client secret to frontend (video: 2:55)
return Response.json({
clientSecret: paymentIntent.clientSecret
});

} catch (error) {
// Error handling shown at 3:00
console.error('Payment intent creation failed:', error);
return Response.json(
{ error: 'Payment setup failed' },
{ status: 500 }
);
}
}
```

**Video Highlight (2:45):** Remember to multiply amount by 100 to convert dollars to cents.
The API expects amounts in the smallest currency unit.

### Approach B: Payment with Customer (Video: 3:15-4:30)

For saving payment methods and repeat customers:

```typescript
// routes/api/create-payment-with-customer.ts
import { paymentClient } from '@/config/payment';

export async function POST(request: Request) {
const { amount, currency, customerId } = await request.json();

// Video: 3:30 - Fetch or create customer
let customer;
if (customerId) {
customer = await paymentClient.getCustomer(customerId);
} else {
customer = await paymentClient.createCustomer({
email: request.user.email,
name: request.user.name
});
}

// Video: 4:00 - Create payment intent with customer
const paymentIntent = await paymentClient.createPaymentIntent({
amount: amount * 100,
currency: currency || 'usd',
customer: customer.id,
setupFutureUsage: 'off_session', // Save for future (video: 4:15)
metadata: {
orderId: generateOrderId(),
customerId: customer.id
}
});

return Response.json({
clientSecret: paymentIntent.clientSecret,
customerId: customer.id
});
}
```

**Video Tip (4:20):** Setting `setupFutureUsage: 'off_session'` allows you to charge
the customer later without requiring them to be present (e.g., for subscriptions).

---

## Pokračování příkladu výstupu...

## Step 3: Handle Frontend Payment (Video: 5:00-7:00)

The video demonstrates integrating the payment UI:

```typescript
// components/PaymentForm.tsx
'use client';

import { useState } from 'react';
import { usePaymentElement, useStripe } from '@paymentgateway/react';

export function PaymentForm({ amount }: { amount: number }) {
const stripe = useStripe();
const [clientSecret, setClientSecret] = useState('');
const [isProcessing, setIsProcessing] = useState(false);

// Video: 5:15 - Fetch client secret on mount
useEffect(() => {
fetch('/api/create-payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount, currency: 'usd' })
})
.then(res => res.json())
.then(data => setClientSecret(data.clientSecret));
}, [amount]);

// Video: 5:45 - Handle form submission
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();

if (!stripe || !clientSecret) return;

setIsProcessing(true);

// Video: 6:10 - Confirm payment
const { error, paymentIntent } = await stripe.confirmPayment({
clientSecret,
confirmParams: {
return_url: `${window.location.origin}/payment/success`
}
});

// Video: 6:30 - Error handling
if (error) {
console.error(error);
alert(`Payment failed: ${error.message}`);
setIsProcessing(false);
} else if (paymentIntent.status === 'succeeded') {
// Payment successful (video: 6:45)
window.location.href = '/payment/success';
}
};

return (
<form onSubmit={handleSubmit}>
{/* Payment UI Component (video: 5:30) */}
<PaymentElement />

<button
type="submit"
disabled={!stripe || isProcessing}
className="mt-4 w-full py-2 px-4 bg-blue-600 text-white rounded"
>
{isProcessing ? 'Processing...' : `Pay $${amount.toFixed(2)}`}
</button>
</form>
);
}
```

**Video Troubleshooting (6:50):**
If you see "Stripe is not defined" error, make sure you've wrapped your app with
`<PaymentGatewayProvider>`:

```typescript
// app/layout.tsx (video: 7:00)
import { PaymentGatewayProvider } from '@paymentgateway/react';

export default function RootLayout({ children }) {
return (
<html>
<body>
<PaymentGatewayProvider apiKey={process.env.NEXT_PUBLIC_PAYMENT_API_KEY}>
{children}
</PaymentGatewayProvider>
</body>
</html>
);
}
```

## Step 4: Webhook Setup (Video: 7:30-9:30)

The presenter demonstrates setting up webhooks for payment confirmation:

```typescript
// app/api/webhooks/payment/route.ts
import { headers } from 'next/headers';
import { paymentClient } from '@/config/payment';
import { db } from '@/lib/database';

export async function POST(request: Request) {
const body = await request.text();
const signature = headers().get('payment-signature');

// Video: 7:50 - Verify webhook signature
let event;
try {
event = paymentClient.constructWebhookEvent(
body,
signature,
process.env.PAYMENT_WEBHOOK_SECRET
);
} catch (err) {
console.error('Webhook signature verification failed:', err);
return new Response('Invalid signature', { status: 400 });
}

// Video: 8:15 - Handle different event types
switch (event.type) {
case 'payment_intent.succeeded':
// Video: 8:25 - Update order in database
const paymentIntent = event.data.object;
const orderId = paymentIntent.metadata.orderId;

await db.orders.update({
where: { id: orderId },
data: {
status: 'paid',
paymentId: paymentIntent.id,
paidAt: new Date()
}
});

// Video: 8:45 - Send confirmation email
await sendOrderConfirmationEmail(orderId);
break;

case 'payment_intent.payment_failed':
// Video: 9:00 - Handle failed payment
const failedIntent = event.data.object;
await db.orders.update({
where: { id: failedIntent.metadata.orderId },
data: { status: 'payment_failed' }
});
break;
}

// Video: 9:15 - Always return 200
return new Response(JSON.stringify({ received: true }), { status: 200 });
}
```

**Video Warning (9:20):** Always return a 200 status code from webhook handlers,
even if there's an error processing the event. Otherwise, the payment gateway
will retry the webhook, potentially causing duplicate processing.

## Testing (Video: 9:45-10:30)

The video shows testing with sandbox credentials:

```typescript
// Use test card numbers (video: 9:50)
const testCards = {
success: '4242424242424242', // Payment succeeds
decline: '4000000000000002', // Card declined
insufficient: '4000000000009995', // Insufficient funds
};
```

**Video Tip (10:10):** Always test in sandbox mode first. Set `environment: 'sandbox'`
in your client initialization.

## Common Issues (from video)

### Issue 1: "Invalid API Key" (Video: 8:30)

**Problem:** Using public key where secret key is required.

**Solution:**
- Public key (pk_xxx): Frontend only
- Secret key (sk_xxx): Backend only

### Issue 2: Amount Mismatch (Video: 3:10)

**Problem:** Sending $10 instead of 1000 cents.

**Solution:** Always multiply by 100: `amount * 100`

### Issue 3: Webhook Not Received (Video: 9:40)

**Problem:** Webhook signature verification failing.

**Solution:**
- Use raw request body (not parsed JSON)
- Get webhook secret from dashboard
- Verify signature before processing

## Next Steps

- **Production Setup:** Switch to live API keys
- **Error Monitoring:** Set up Sentry/logging for webhook errors
- **Idempotency:** Implement idempotency keys for retry safety
- **PCI Compliance:** Never store raw card numbers

## Resources

- Video Tutorial: payment-integration-tutorial.mp4
- API Documentation: https://docs.paymentgateway.com
- Support: [email protected]
```

---

## Závěr: Gemini Multimodal Best Practices Shrnutí

**Klíčové Poznatky:**

1. **Strukturujte Vstupy Jasně:** Oddělte each modalitu do vlastní sekce s labels
2. **Explicitní Extrakce:** Řekněte přesně, co má Gemini hledat v obrázku/videu
3. **Cross-Modal Links:** Propojte různé modality explicitními references
4. **Prioritizace:** Určete, která modalita je "source of truth" při konfliktech
5. **Iterativní Approach:** Rozdělte complex úlohy do fází (analyze → enhance → generate)
6. **Vysoká Kvalita Vstupů:** Screenshots v HD, annotated pokud možno, short focused videos
7. **Konfliktní Řešení:** Definujte rules, jak řešit rozpory mezi modalitami
8. **Testing Pattern:** Vždy poskytněte example expected output

**Kdy použít multimodal vs. text-only:**

| Use Case | Recommended Approach |
|----------|---------------------|
| UI Design → Code | Multimodal (screenshot + text) |
| Code Review | Text-only (code snippets sufficient) |
| Video Tutorial → Docs | Multimodal (video + code) |
| API Integration Guide | Text-only (unless complex UI) |
| Database Schema → Implementation | Multimodal (diagram + text) |
| Bug Debugging | Text-only (stack traces, logs) |
| Animation Implementation | Multimodal (video + code) |

S těmito technikami můžete Gemini využít pro širokou škálu úloh, které vyžadují kombinaci různých typů vstupů!