Simplify GIPHY result presentation

TODO.md

@@ -268,6 +268,17 @@
   - backend debug broadcasts
 
 ## Recent Change Log
+- Date: `2026-03-24`
+- What changed:
+  - Simplified the GIPHY image-search UX so it presents raw search results instead of looking like an AI-evaluated result flow.
+  - Updated the image-mode copy to describe direct GIPHY search results, and changed the shared preview modal labels/content for GIPHY items from AI-note style metadata to plain result/source info.
+- Why it changed:
+  - The image-search experience should behave like a straightforward provider search result browser, not like the video-side Gemini review flow.
+- How it was verified:
+  - `node --check frontend/app.js`
+- What is still risky or incomplete:
+  - This is a UX clarification pass; the backend still uses Gemini only for multilingual query expansion and does not do visual evaluation on GIPHY items.
+
 - Date: `2026-03-24`
 - What changed:
   - Relaxed Gemini image-query expansion parsing so loose plain-text numbered lists can still be accepted when the model prepends explanatory text instead of returning a clean JSON object.

frontend/app.js

@@ -48,6 +48,8 @@ const debugSummary = document.getElementById("debugSummary");
 const resultModal = document.getElementById("resultModal");
 const resultModalTitle = document.getElementById("resultModalTitle");
 const resultModalSource = document.getElementById("resultModalSource");
+const resultModalReasonLabel = document.getElementById("resultModalReasonLabel");
+const resultModalSnippetLabel = document.getElementById("resultModalSnippetLabel");
 const resultModalSnippet = document.getElementById("resultModalSnippet");
 const resultModalReason = document.getElementById("resultModalReason");
 const resultModalFrame = document.getElementById("resultModalFrame");
@@ -66,6 +68,8 @@ const resultModalReady = Boolean(
   resultModal &&
   resultModalTitle &&
   resultModalSource &&
+  resultModalReasonLabel &&
+  resultModalSnippetLabel &&
   resultModalSnippet &&
   resultModalReason &&
   resultModalFrame &&
@@ -337,7 +341,7 @@ function applyMediaTypeUI() {
   searchResultsViewport.classList.toggle("image-results-scroll", isImageMode);
   searchModeTitle.textContent = isImageMode ? "AI Image Discovery" : "AI Smart Discovery";
   searchModeHint.textContent = isImageMode
-    ? "GIPHY 이미지/GIF 검색 모드입니다. Gemini가 영어 검색어 5개로 확장한 뒤 최대 100개 결과를 보여줍니다."
+    ? "GIPHY 이미지/GIF 검색 결과를 그대로 보여주는 모드입니다. 최대 100개 결과를 내부 스크롤로 탐색할 수 있습니다."
     : "비디오 검색 모드입니다. 실제 검색 API와 연결되어 있습니다.";
   searchQuery.placeholder = isImageMode ? "검색할 이미지를 설명하세요" : "한글 검색어를 입력하세요";
   searchSubmitButton.textContent = isImageMode ? "Search GIPHY" : "AI Search";
@@ -815,15 +819,21 @@ async function openResultModal(item) {
   const summaryRequestId = activeResultModalSummaryRequest;
   resultModalTitle.textContent = item.title || "Untitled";
   resultModalSource.textContent = item.source || "";
+  resultModalReasonLabel.textContent = giphyItem ? "Result Info" : "AI Note";
+  resultModalSnippetLabel.textContent = giphyItem ? "Source" : "Source Summary";
   resultModalReason.textContent = giphyItem
     ? [
-      `Original Query: ${item.originalQuery || "-"}`,
-      `Expanded Query: ${item.searchQuery || "-"}`,
       `Rating: ${item.rating || "unrated"}`,
+      `Size: ${item.width || "?"} x ${item.height || "?"}`,
+      `Provider ID: ${item.providerId || "-"}`,
     ].join("\n")
     : (summarizeReason(item.reason) || "AI 노트가 없습니다.");
   const originalSummary = giphyItem
-    ? `Powered by GIPHY\n${item.width || "?"} x ${item.height || "?"}\n${item.sourcePageUrl || item.openUrl || item.link || ""}`.trim()
+    ? [
+      "Powered by GIPHY",
+      item.sourcePageUrl || item.openUrl || item.link || "",
+      `Rating: ${item.rating || "unrated"}`,
+    ].filter(Boolean).join("\n")
     : (item.snippet || "원본 페이지에서 사용할 수 있는 설명이 없습니다.");
   resultModalSnippet.textContent = originalSummary;
   resultModalOpenExternal.href = item.openUrl || item.sourcePageUrl || item.link || "#";

frontend/index.html

@@ -60,7 +60,7 @@
                   <span class="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[11px] uppercase tracking-[0.24em] text-zinc-300">Powered by GIPHY</span>
                 </div>
                 <p class="max-w-2xl text-sm leading-6 text-zinc-300">
-                  어떤 언어로 검색해도 Gemini가 영어 검색어 5개로 확장한 뒤 GIPHY 이미지/GIF 검색을 수행합니다. 결과는 아래 내부 스크롤 패널에서 최대 100개까지 탐색할 수 있습니다.
+                  어떤 언어로 검색해도 GIPHY 이미지/GIF 검색 결과를 최대 100개까지 내부 스크롤 패널에서 바로 탐색할 수 있습니다.
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -208,7 +208,7 @@
         </div>
         <div class="result-modal-details grid min-h-0 gap-3 px-3 py-3 sm:gap-4 sm:px-4 sm:py-4 lg:grid-cols-[1.5fr_0.8fr]">
           <div class="flex min-h-[180px] min-w-0 flex-col rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-            <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">AI Note</p>
+            <p id="resultModalReasonLabel" class="text-xs uppercase tracking-[0.25em] text-zinc-500">AI Note</p>
             <div class="result-panel-scroll mt-3 min-h-0 flex-1 overflow-y-auto pr-2">
               <p id="resultModalReason" class="whitespace-pre-wrap text-xs leading-6 text-zinc-200 sm:text-sm"></p>
             </div>
@@ -223,7 +223,7 @@
               </button>
             </div>
             <div class="flex min-h-0 flex-1 flex-col">
-              <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
+              <p id="resultModalSnippetLabel" class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
               <div class="result-summary-scroll mt-3 min-h-0 flex-1 overflow-y-auto pr-2">
                 <p id="resultModalSnippet" class="text-xs leading-6 text-zinc-300 sm:text-sm"></p>
               </div>