diff --git a/frontend/app/flashcards/[id]/page.tsx b/frontend/app/flashcards/[id]/page.tsx
index a1673f1..de4a6d4 100644
--- a/frontend/app/flashcards/[id]/page.tsx
+++ b/frontend/app/flashcards/[id]/page.tsx
@@ -6,6 +6,7 @@ import { Navigation } from '@/components/Navigation'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { useToast } from '@/components/Toast'
 import { flashcardsService, type Flashcard } from '@/lib/services/flashcards'
+import { imageGenerationService } from '@/lib/services/imageGeneration'
 
 interface FlashcardDetailPageProps {
   params: Promise<{
@@ -214,10 +215,6 @@ function FlashcardDetailContent({ cardId }: { cardId: string }) {
     return card.primaryImageUrl || null
   }
 
-  // 檢查詞彙是否有例句圖片 - 使用 API 資料
-  const hasExampleImage = (card: Flashcard): boolean => {
-    return card.hasExampleImage
-  }
 
   // 詞性簡寫轉換
   const getPartOfSpeechDisplay = (partOfSpeech: string): string => {
@@ -349,7 +346,7 @@ function FlashcardDetailContent({ cardId }: { cardId: string }) {
 
       const finalStatus = await imageGenerationService.pollUntilComplete(
         requestId,
-        (status) => {
+        (status: any) => {
           const stage = status.stages.gemini.status === 'completed'
             ? 'Replicate 生成圖片中...' : 'Gemini 生成描述中...'
           setGenerationProgress(stage)
diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index ba5f572..60c9731 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -515,9 +515,11 @@ interface SearchResultsProps {
   onToggleFavorite: (card: Flashcard) => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
-  getExampleImage: (word: string) => string | null
-  hasExampleImage: (word: string) => boolean
+  getExampleImage: (card: Flashcard) => string | null
+  hasExampleImage: (card: Flashcard) => boolean
   onGenerateExampleImage: (card: Flashcard) => void
+  generatingCards: Set<string>
+  generationProgress: {[cardId: string]: string}
   router: any
 }
 
@@ -532,6 +534,8 @@ function SearchResults({
   getExampleImage,
   hasExampleImage,
   onGenerateExampleImage,
+  generatingCards,
+  generationProgress,
   router
 }: SearchResultsProps) {
   if (searchState.flashcards.length === 0) {
@@ -573,6 +577,8 @@ function SearchResults({
           getExampleImage={getExampleImage}
           hasExampleImage={hasExampleImage}
           onGenerateExampleImage={() => onGenerateExampleImage(card)}
+          generatingCards={generatingCards}
+          generationProgress={generationProgress}
           router={router}
         />
       ))}
@@ -589,13 +595,15 @@ interface FlashcardItemProps {
   onToggleFavorite: () => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
-  getExampleImage: (word: string) => string | null
-  hasExampleImage: (word: string) => boolean
+  getExampleImage: (card: Flashcard) => string | null
+  hasExampleImage: (card: Flashcard) => boolean
   onGenerateExampleImage: () => void
+  generatingCards: Set<string>
+  generationProgress: {[cardId: string]: string}
   router: any
 }
 
-function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, hasExampleImage, onGenerateExampleImage, router }: FlashcardItemProps) {
+function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, hasExampleImage, onGenerateExampleImage, generatingCards, generationProgress, router }: FlashcardItemProps) {
   return (
     <div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
       <div className="p-4">