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

feat: AI 미디어 허브 초기 세팅 및 뼈대 코드 완성
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 3m7s
Details

Browse Source
This commit is contained in:
AI Assistant
2026-03-12 12:43:17 +09:00
commit 4b8c2c0453
9 changed files with 436 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/index.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Media Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: '#121212',
darker: '#0a0a0a',
}
}
}
}
</script>
<style>
body { background-color: #121212; color: #ffffff; }
</style>
</head>
<body class="min-h-screen bg-dark text-white font-sans p-8">
<header class="mb-12 border-b border-gray-800 pb-4">
<h1 class="text-3xl font-bold tracking-tight">AI Media Hub</h1>
<p class="text-gray-400 mt-2">Discover, Ingest, and Download Media</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Zone A: Discovery -->
<section class="bg-darker p-6 rounded-xl border border-gray-800">
<h2 class="text-xl font-semibold mb-4">Zone A: AI Discovery</h2>
<div class="flex gap-2 mb-4">
<input type="text" placeholder="Search parameters..." class="flex-1 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
<button class="bg-white text-black px-4 py-2 rounded font-medium hover:bg-gray-200 transition-colors">Search</button>
</div>
<div class="grid grid-cols-2 gap-4 auto-rows-[100px]">
<!-- Mock Thumbnails -->
<div class="bg-gray-800 rounded animate-pulse cursor-pointer hover:opacity-80 transition-opacity"></div>
<div class="bg-gray-800 rounded animate-pulse cursor-pointer hover:opacity-80 transition-opacity"></div>
</div>
</section>
<!-- Zone B: Ingest -->
<section class="bg-darker p-6 rounded-xl border border-gray-800">
<h2 class="text-xl font-semibold mb-4">Zone B: Smart Ingest</h2>
<div class="border-2 border-dashed border-gray-700 rounded-xl h-64 flex flex-col items-center justify-center text-gray-500 hover:border-gray-500 hover:text-gray-300 transition-colors cursor-pointer group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mb-2 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<span>Drag & Drop files here</span>
<span class="text-sm mt-1">or click to browse</span>
</div>
</section>
<!-- Zone C: Download -->
<section class="bg-darker p-6 rounded-xl border border-gray-800 flex flex-col">
<h2 class="text-xl font-semibold mb-4">Zone C: Direct Download</h2>
<div class="flex-1">
<label class="block text-sm text-gray-400 mb-2">Media URL</label>
<input type="text" placeholder="https://youtube.com/..." class="w-full bg-dark border border-gray-700 rounded px-3 py-2 mb-4 focus:outline-none focus:border-white transition-colors">
<label class="block text-sm text-gray-400 mb-2">Crop Settings (Optional)</label>
<div class="flex gap-2 mb-6">
<input type="text" placeholder="Start (e.g. 00:01:00)" class="w-1/2 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
<input type="text" placeholder="End (e.g. 00:02:30)" class="w-1/2 bg-dark border border-gray-700 rounded px-3 py-2 focus:outline-none focus:border-white transition-colors">
</div>
<button class="w-full bg-white text-black py-3 rounded font-medium hover:bg-gray-200 transition-transform active:scale-95">Download via yt-dlp</button>
</div>
<div class="mt-4 pt-4 border-t border-gray-800">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Progress</span>
<span>0%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-white h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</section>
</div>
<script>
// Placeholder for WebSocket logic
console.log("AI Media Hub Initialized.");
</script>
</body>
</html>