savethenurse/ai-media-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add GIPHY image search feature

Browse Source
This commit is contained in:
GHStaK
2026-03-24 16:02:49 +09:00
parent 494a54fa46
commit d63c467ef9
13 changed files with 1385 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+20 -12
View File
@@ -55,9 +55,12 @@
<div id="imageSearchSandbox" class="mt-4 hidden rounded-3xl border border-white/10 bg-[linear-gradient(135deg,rgba(250,204,21,0.07),rgba(59,130,246,0.08))] p-4">
<div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div class="space-y-2">
<p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Image Search Prototype</p>
<div class="flex flex-wrap items-center gap-3">
<p class="text-xs uppercase tracking-[0.25em] text-zinc-500">GIPHY Image Search</p>
<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">
현재는 UI 전용 테스트 모드입니다. 아래 샘플 스타일 버튼과 테스트 이미지를 사용해 향후 이미지 검색 화면 구성을 미리 볼 수 있습니다.
어떤 언어로 검색해도 Gemini가 영어 검색어 5개로 확장한 뒤 GIPHY 이미지/GIF 검색을 수행합니다. 결과는 아래 내부 스크롤 패널에서 최대 100개까지 탐색할 수 있습니다.
</p>
</div>
<div class="flex flex-wrap gap-2">
@@ -66,21 +69,25 @@
<button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="minimal product mockup">Product Mockup</button>
</div>
</div>
<div id="imageSearchPreviewStrip" class="mt-4 grid gap-3 sm:grid-cols-3">
<div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
<img src="https://placehold.co/1200x900/0f172a/e2e8f0?text=Test+Image+01" alt="Test image 01" class="aspect-[4/3] w-full object-cover" />
</div>
<div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
<img src="https://placehold.co/1200x900/1f2937/fde68a?text=Test+Image+02" alt="Test image 02" class="aspect-[4/3] w-full object-cover" />
</div>
<div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
<img src="https://placehold.co/1200x900/3f3f46/dbeafe?text=Test+Image+03" alt="Test image 03" class="aspect-[4/3] w-full object-cover" />
<div id="giphyMetaPanel" class="mt-4 hidden rounded-2xl border border-white/10 bg-black/30 p-4">
<div class="grid gap-3 lg:grid-cols-[1.4fr_1fr]">
<div class="space-y-2">
<p class="text-xs uppercase tracking-[0.22em] text-zinc-500">Search Meta</p>
<p id="giphyOriginalQuery" class="text-sm text-zinc-200">Original query: -</p>
<p id="giphyResultCount" class="text-sm text-zinc-400">0 results</p>
</div>
<div class="space-y-2">
<p class="text-xs uppercase tracking-[0.22em] text-zinc-500">Expanded Queries</p>
<div id="giphyExpandedQueries" class="flex flex-wrap gap-2"></div>
</div>
</div>
</div>
</div>
<div id="searchWarning" class="mt-3 hidden rounded-2xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200"></div>
<div id="queryVariants" class="hidden"></div>
<div id="searchResults" class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3"></div>
<div id="searchResultsViewport" class="mt-6">
<div id="searchResults" class="grid gap-5 sm:grid-cols-2 xl:grid-cols-3"></div>
</div>
</article>
<div class="grid gap-8">
@@ -268,6 +275,7 @@
<div class="space-y-2 p-5">
<h3 class="image-card-title line-clamp-2 text-base font-medium text-white"></h3>
<p class="image-card-caption line-clamp-3 text-sm text-zinc-300"></p>
<p class="image-card-meta text-[11px] uppercase tracking-[0.22em] text-zinc-500"></p>
</div>
</button>
</template>