Upload 14 files

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.12-slim
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+ENV PORT=7860
+
+COPY . .
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,546 @@
+from fastapi import FastAPI, HTTPException, Depends
+from fastapi.responses import FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy.orm import Session
+from database import get_db, User, ListeningHistory, SessionLocal, Base, engine
+import json
+from pydantic import BaseModel
+import httpx
+import os
+import asyncio
+from dotenv import load_dotenv
+import uvicorn
+import torch
+import torch.nn.functional as F
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+import random
+
+TOP_TAGS_CACHE = []
+
+USE_QUANTIZED_MODEL = False
+
+load_dotenv()
+
+LASTFM_API_KEY = os.getenv("LASTFM_API_KEY")
+if not LASTFM_API_KEY:
+    raise ValueError("Missing LASTFM_API_KEY! Please check your .env file.")
+
+TOKENIZER_PATH = "./tokenizer"
+
+import torch
+import torch.nn.functional as F
+from transformers import AutoTokenizer
+
+if USE_QUANTIZED_MODEL:
+    from optimum.onnxruntime import ORTModelForSequenceClassification
+    MODEL_PATH = "models/onnx_model_int8"
+    print("Using Quantized Model")
+else:
+    from transformers import AutoModelForSequenceClassification
+    MODEL_PATH = "./models/fp32"
+    print("Using UnQuantized Model")
+
+# 1. Define Data Structures
+class OnboardRequest(BaseModel):
+    user_id: str
+    favorite_artists: list[str] = []
+    favorite_genres: list[str] = []
+    default_tags: list[str] = []
+
+class HistoryRequest(BaseModel):
+    user_id: str
+    track_title: str
+    track_artist: str
+    track_url: str
+    duration: int
+    emotion_state: str
+    action: str
+
+class DiaryRequest(BaseModel):
+    user_id: str
+    text: str
+    intent: str # "match" or "shift"
+
+class Track(BaseModel):
+    title: str
+    artist: str
+    url: str
+
+class RecommendationResponse(BaseModel):
+    emotion: str
+    confidence: float
+    intent: str
+    tracks: list[Track]
+
+class TextRequest(BaseModel):
+    text: str
+
+class SentimentResponse(BaseModel):
+    label: str
+    confidence: float
+    all_scores: dict
+
+EMOTION_TAG_MAP = {
+    "LABEL_0": {
+        "name": "분노 (Anger)",
+        "match": ["angry", "heavy metal", "death metal", "hard rock", "punk", "screamo", "aggressive", "intense", "hardcore", "thrash metal", "grunge", "rap", "hip hop", "rage", "metalcore", "nu metal"],
+        "shift": ["chillout", "ambient", "calm", "healing", "acoustic", "lo-fi", "soothing", "meditation", "peaceful", "relax", "soft", "classical", "quiet", "smooth"]
+    },
+    "LABEL_1": {
+        "name": "슬픔 (Sadness)",
+        "match": ["sad", "melancholy", "sadcore", "cry", "ballad", "emotional", "soul", "indie", "depressive", "bittersweet", "lonely", "melancholic", "heartbreak", "slow", "tearjerker", "gloom", "depressing"],
+        "shift": ["happy", "sunshine", "upbeat", "indie pop", "dance", "pop", "fun", "energy", "energetic", "cheerful", "feel good", "party", "lively", "uplifting", "summer"]
+    },
+    "LABEL_2": {
+        "name": "불안 (Anxiety)",
+        "match": ["dark ambient", "sad", "anxious", "dark", "creepy", "atmospheric", "tense", "drone", "unsettling", "noise", "industrial", "chaotic", "intense", "experimental"],
+        "shift": ["comfort", "warm", "lo-fi", "acoustic", "healing", "piano", "chill", "soothing", "ambient", "relax", "calm", "easy listening", "meditation", "peaceful", "gentle"]
+    },
+    "LABEL_3": {
+        "name": "상처 (Hurt)",
+        "match": ["heartbreak", "emotional", "sad", "breakup", "ballad", "tearjerker", "longing", "nostalgic", "acoustic", "sadcore", "soul", "blues", "melancholy", "missing you", "sorrow"],
+        "shift": ["hopeful", "uplifting", "healing", "feel good", "acoustic", "sunshine", "warm", "comfort", "inspirational", "bright", "happy", "positive", "joy"]
+    },
+    "LABEL_4": {
+        "name": "당황 (Embarrassment)",
+        "match": ["indie", "alternative", "chaotic", "noise", "experimental", "quirky", "weird", "avant-garde", "raw", "eclectic", "fast", "punk", "ska"],
+        "shift": ["ambient", "focus", "lo-fi", "relax", "chillout", "calm", "smooth", "jazz", "easy listening", "slow", "soft", "gentle", "piano", "acoustic"]
+    },
+    "LABEL_5": {
+        "name": "기쁨 (Joy)",
+        "match": ["happy", "upbeat", "feel good", "pop", "dance", "fun", "summer", "cheerful", "energetic", "party", "sunshine", "lively", "exciting", "electronic", "disco", "funk"],
+        "shift": ["chill", "acoustic", "calm", "lo-fi", "relaxing", "smooth", "easy listening", "quiet", "soft", "ambient", "mellow", "sleep"]
+    }
+}
+
+CUSTOM_LABELS = {
+    "LABEL_0": "Anger",
+    "LABEL_1": "Sadness",
+    "LABEL_2": "Anxiety",
+    "LABEL_3": "Hurt",
+    "LABEL_4": "Embarrassment",
+    "LABEL_5": "Joy"
+}
+
+EMOTION_SPOTIFY_MAP = {
+    "LABEL_0": { # Anger
+        "match": {"min_energy": 0.7, "max_energy": 1.0, "min_valence": 0.0, "max_valence": 0.4},
+        "shift": {"min_energy": 0.0, "max_energy": 0.4, "min_valence": 0.6, "max_valence": 1.0}
+    },
+    "LABEL_1": { # Sadness
+        "match": {"min_energy": 0.0, "max_energy": 0.4, "min_valence": 0.0, "max_valence": 0.4},
+        "shift": {"min_energy": 0.6, "max_energy": 1.0, "min_valence": 0.7, "max_valence": 1.0}
+    },
+    "LABEL_2": { # Anxiety
+        "match": {"min_energy": 0.5, "max_energy": 0.8, "min_valence": 0.0, "max_valence": 0.4},
+        "shift": {"min_energy": 0.0, "max_energy": 0.4, "min_valence": 0.6, "max_valence": 1.0}
+    },
+    "LABEL_3": { # Hurt
+        "match": {"min_energy": 0.0, "max_energy": 0.5, "min_valence": 0.0, "max_valence": 0.4},
+        "shift": {"min_energy": 0.4, "max_energy": 0.7, "min_valence": 0.6, "max_valence": 1.0}
+    },
+    "LABEL_4": { # Embarrassment
+        "match": {"min_energy": 0.6, "max_energy": 1.0, "min_valence": 0.0, "max_valence": 0.5},
+        "shift": {"min_energy": 0.0, "max_energy": 0.5, "min_valence": 0.6, "max_valence": 1.0}
+    },
+    "LABEL_5": { # Joy
+        "match": {"min_energy": 0.6, "max_energy": 1.0, "min_valence": 0.7, "max_valence": 1.0},
+        "shift": {"min_energy": 0.0, "max_energy": 0.5, "min_valence": 0.5, "max_valence": 0.7}
+    }
+}
+
+# 2. Initialize FastAPI app
+app = FastAPI(title="ELECTRA Sentiment Analysis API")
+
+# Add CORS so the HTML page can communicate with this API
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], # In production, change to your website's URL
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Check if GPU is available, otherwise use CPU
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+try:
+    print(f"Loading tokenizer from {TOKENIZER_PATH}...")
+    tokenizer = AutoTokenizer.from_pretrained(TOKENIZER_PATH)
+    print(f"Loading model from {MODEL_PATH}...")
+    if USE_QUANTIZED_MODEL:
+        model = ORTModelForSequenceClassification.from_pretrained(MODEL_PATH)
+    else:
+        model = AutoModelForSequenceClassification.from_pretrained(MODEL_PATH)
+        model.to(device)
+        model.eval()  # Set model to evaluation mode
+    print("Model loaded successfully!")
+except Exception as e:
+    print(f"Error loading model: {e}")
+    raise RuntimeError(f"Could not load model.") from e
+
+
+async def fetch_lastfm_tracks(tag: str, limit: int = 50):
+    print(f"🔍 [DEBUG] Searching Last.fm top tracks for tag: '{tag}' (limit={limit})")
+    url = "https://ws.audioscrobbler.com/2.0/"
+    params = {
+        "method": "tag.gettoptracks",
+        "tag": tag,
+        "api_key": LASTFM_API_KEY,
+        "format": "json",
+        "limit": limit
+    }
+    async with httpx.AsyncClient() as client:
+        try:
+            res = await client.get(url, params=params)
+            if res.status_code == 200:
+                data = res.json()
+                return data.get("tracks", {}).get("track", [])
+        except Exception as e:
+            print(f"Error fetching Last.fm tracks: {e}")
+    return []
+
+async def fetch_lastfm_artist_tracks(artist: str, limit: int = 50):
+    print(f"🔍 [DEBUG] Searching Last.fm top tracks for artist: '{artist}' (limit={limit})")
+    url = "https://ws.audioscrobbler.com/2.0/"
+    params = {
+        "method": "artist.gettoptracks",
+        "artist": artist,
+        "api_key": LASTFM_API_KEY,
+        "format": "json",
+        "limit": limit
+    }
+    async with httpx.AsyncClient() as client:
+        try:
+            res = await client.get(url, params=params)
+            if res.status_code == 200:
+                data = res.json()
+                return data.get("toptracks", {}).get("track", [])
+        except Exception as e:
+            print(f"Error fetching Last.fm artist tracks: {e}")
+    return []
+
+async def fetch_lastfm_similar_tracks(artist: str, track: str, limit: int = 50):
+    print(f"🔍 [DEBUG] Searching Last.fm for tracks similar to: '{artist} - {track}' (limit={limit})")
+    url = "https://ws.audioscrobbler.com/2.0/"
+    params = {
+        "method": "track.getsimilar",
+        "artist": artist,
+        "track": track,
+        "api_key": LASTFM_API_KEY,
+        "format": "json",
+        "limit": limit
+    }
+    async with httpx.AsyncClient() as client:
+        try:
+            res = await client.get(url, params=params)
+            if res.status_code == 200:
+                data = res.json()
+                return data.get("similartracks", {}).get("track", [])
+        except Exception as e:
+            print(f"Error fetching Last.fm similar tracks: {e}")
+    return []
+
+@app.on_event("startup")
+async def startup_event():
+    global TOP_TAGS_CACHE
+    url = "https://ws.audioscrobbler.com/2.0/"
+    params = {
+        "method": "chart.gettoptags",
+        "api_key": LASTFM_API_KEY,
+        "format": "json",
+        "limit": 1000
+    }
+    headers = {"User-Agent": "DiaryMusicRecommender/1.0"}
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        try:
+            response = await client.get(url, params=params, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            if "tags" in data and "tag" in data["tags"]:
+                TOP_TAGS_CACHE = [t["name"].lower() for t in data["tags"]["tag"]]
+                print(f"Loaded {len(TOP_TAGS_CACHE)} top tags for autocomplete.")
+        except Exception as e:
+            print(f"Error loading top tags: {e}")
+
+@app.get("/api/tags/autocomplete")
+async def autocomplete_tags(q: str = ""):
+    if not q:
+        return {"tags": []}
+
+    q_lower = q.lower()
+    matches = [t for t in TOP_TAGS_CACHE if q_lower in t]
+    matches.sort(key=lambda x: (not x.startswith(q_lower), x))
+    return {"tags": matches[:10]}
+
+@app.get("/api/artists/autocomplete")
+async def autocomplete_artists(q: str = ""):
+    if not q:
+        return {"artists": []}
+        
+    url = "https://ws.audioscrobbler.com/2.0/"
+    params = {
+        "method": "artist.search",
+        "artist": q,
+        "api_key": LASTFM_API_KEY,
+        "format": "json",
+        "limit": 10
+    }
+    async with httpx.AsyncClient() as client:
+        try:
+            res = await client.get(url, params=params)
+            if res.status_code == 200:
+                data = res.json()
+                matches = [a["name"] for a in data.get("results", {}).get("artistmatches", {}).get("artist", [])]
+                return {"artists": matches}
+        except Exception as e:
+            print(f"Error searching Last.fm artists: {e}")
+    return {"artists": []}
+
+@app.post("/api/users/onboard")
+def onboard_user(request: OnboardRequest, db: Session = Depends(get_db)):
+    user = db.query(User).filter(User.user_id == request.user_id).first()
+    if not user:
+        user = User(user_id=request.user_id)
+        db.add(user)
+
+    user.set_preferences(request.favorite_artists, request.favorite_genres, request.default_tags)
+    db.commit()
+    return {"message": "User onboarded successfully."}
+
+@app.post("/api/users/history")
+def save_history(request: HistoryRequest, db: Session = Depends(get_db)):
+    new_history = ListeningHistory(
+        user_id=request.user_id, track_title=request.track_title, track_artist=request.track_artist,
+        track_url=request.track_url, duration=request.duration, emotion_state=request.emotion_state, action=request.action
+    )
+    db.add(new_history)
+    db.commit()
+    return {"message": "History saved successfully"}
+
+@app.post("/recommend", response_model=RecommendationResponse)
+async def recommend_music(request: DiaryRequest, db: Session = Depends(get_db)):
+    if not request.text.strip():
+        raise HTTPException(status_code=400, detail="Diary entry cannot be empty.")
+
+    # 1. Look up user's default tags
+    user = db.query(User).filter(User.user_id == request.user_id).first()
+    default_tags = json.loads(user.default_tags_json) if user and user.default_tags_json else []
+    # 2. Sentiment Analysis
+    inputs = tokenizer(request.text, return_tensors="pt", truncation=True, max_length=512, padding=True)
+
+    if not USE_QUANTIZED_MODEL:
+        inputs = inputs.to(device)
+
+    with torch.no_grad():
+        outputs = model(**inputs)
+
+    probabilities = F.softmax(outputs.logits, dim=-1)[0]
+    predicted_class_id = torch.argmax(probabilities).item()
+    confidence = probabilities[predicted_class_id].item()
+    raw_label = model.config.id2label[predicted_class_id]
+
+    emotion_data = EMOTION_TAG_MAP.get(raw_label, EMOTION_TAG_MAP["LABEL_0"])
+    emotion_name = emotion_data["name"]
+
+    intent_tags = emotion_data["match"] if request.intent == "match" else emotion_data["shift"]
+    
+    # Shuffle tags to ensure variety
+    random.shuffle(intent_tags)
+
+    tracks = []
+    
+    fav_artists = json.loads(user.favorite_artists_json) if user and user.favorite_artists_json else []
+    fav_genres = json.loads(user.favorite_genres_json) if user and user.favorite_genres_json else []
+
+    # 1. Randomly inject 1-2 favorite tracks into normal suggestions
+    if fav_artists or fav_genres:
+        fav_pool = []
+        if fav_artists:
+            artist = random.choice(fav_artists)
+            fav_pool.extend(await fetch_lastfm_artist_tracks(artist, limit=50))
+        if fav_genres:
+            genre = random.choice(fav_genres)
+            fav_pool.extend(await fetch_lastfm_tracks(genre, limit=50))
+            
+        if fav_pool:
+            random.shuffle(fav_pool)
+            num_to_inject = random.randint(1, 2)
+            for t in fav_pool[:num_to_inject]:
+                if t.get("url"):
+                    artist_name = t["artist"]["name"] if isinstance(t.get("artist"), dict) else t.get("artist", "Unknown")
+                    tracks.append(Track(
+                        title=t["name"], 
+                        artist=artist_name, 
+                        url=t["url"]
+                    ))
+
+    # 3. INTERSECTION LOGIC with Last.fm
+    base_tracks = []
+    if default_tags:
+        user_base_tag = random.choice(default_tags)
+        base_tracks = await fetch_lastfm_tracks(user_base_tag, limit=100)
+        base_urls = {t["url"] for t in base_tracks if "url" in t}
+        
+        # Loop through ALL intent tags until we reach 5 tracks
+        for emotion_tag in intent_tags:
+            if len(tracks) >= 5:
+                break
+                
+            print(f"\n🔍 [DEBUG] Attempting to find intersection for tag '{user_base_tag}' AND emotion '{emotion_tag}'")
+            emotion_tracks = await fetch_lastfm_tracks(emotion_tag, limit=100)
+            
+            intersection = [t for t in emotion_tracks if t.get("url") in base_urls]
+            if intersection:
+                random.shuffle(intersection)
+                for t in intersection:
+                    existing_urls = [existing.url for existing in tracks]
+                    if t["url"] not in existing_urls:
+                        artist_name = t["artist"]["name"] if isinstance(t.get("artist"), dict) else t.get("artist", "Unknown")
+                        tracks.append(Track(
+                            title=t["name"], 
+                            artist=artist_name, 
+                            url=t["url"]
+                        ))
+                    if len(tracks) >= 5:
+                        break
+
+    # 4. SIMILAR TRACKS LOGIC
+    # If we found at least 1 track from intersections (or fav injection), use it as a seed to find similar tracks!
+    if 0 < len(tracks) < 5:
+        print(f"🔍 [DEBUG] Found {len(tracks)} tracks. Using them as seeds to find similar tracks.")
+        similar_pool = []
+        for seed_track in tracks:
+            similar_pool.extend(await fetch_lastfm_similar_tracks(seed_track.artist, seed_track.title, limit=20))
+            
+        if similar_pool:
+            random.shuffle(similar_pool)
+            for t in similar_pool:
+                existing_urls = [existing.url for existing in tracks]
+                if t.get("url") and t["url"] not in existing_urls:
+                    artist_name = t["artist"]["name"] if isinstance(t.get("artist"), dict) else t.get("artist", "Unknown")
+                    tracks.append(Track(
+                        title=t["name"], 
+                        artist=artist_name, 
+                        url=t["url"]
+                    ))
+                if len(tracks) >= 5:
+                    break
+
+    # 5. FALLBACK LOGIC: If we tried all tags and similar tracks and still don't have 5 tracks
+    if len(tracks) < 5:
+        print(f"⚠️ [DEBUG] Still only have {len(tracks)} tracks. Falling back to fav artists/genres/default tags.")
+        fallback_pool = []
+        
+        if fav_artists:
+            artist = random.choice(fav_artists)
+            fallback_pool.extend(await fetch_lastfm_artist_tracks(artist, limit=50))
+        if fav_genres:
+            genre = random.choice(fav_genres)
+            fallback_pool.extend(await fetch_lastfm_tracks(genre, limit=50))
+            
+        # Prioritize default tag over feeling
+        if base_tracks:
+            fallback_pool.extend(base_tracks)
+        else:
+            # If user has no default tags at all, fallback to a random feeling
+            fallback_pool.extend(await fetch_lastfm_tracks(random.choice(intent_tags), limit=50))
+            
+        if fallback_pool:
+            random.shuffle(fallback_pool)
+            for t in fallback_pool:
+                existing_urls = [existing.url for existing in tracks]
+                if t.get("url") and t["url"] not in existing_urls:
+                    artist_name = t["artist"]["name"] if isinstance(t.get("artist"), dict) else t.get("artist", "Unknown")
+                    tracks.append(Track(
+                        title=t["name"], 
+                        artist=artist_name, 
+                        url=t["url"]
+                    ))
+                if len(tracks) >= 5:
+                    break
+    # 감정 자동 저장
+    diary_record = ListeningHistory(
+        user_id=request.user_id,
+        track_title="",
+        track_artist="",
+        track_url="",
+        duration=0,
+        emotion_state=emotion_name,
+        action="diary"
+        )
+    db.add(diary_record)
+    db.commit()
+
+    return RecommendationResponse(
+        emotion=emotion_name,
+        confidence=confidence,
+        intent=request.intent,
+        tracks=tracks
+    )
+
+@app.post("/analyze", response_model=SentimentResponse)
+async def analyze_sentiment(request: TextRequest):
+    if not request.text.strip():
+        raise HTTPException(status_code=400, detail="Text cannot be empty.")
+    try:
+        inputs = tokenizer(request.text, return_tensors="pt", truncation=True, max_length=512, padding=True)
+        if not USE_QUANTIZED_MODEL:
+            inputs = inputs.to(device)
+
+        with torch.no_grad():
+            outputs = model(**inputs)
+
+        logits = outputs.logits
+        probabilities = F.softmax(logits, dim=-1)[0]
+        predicted_class_id = torch.argmax(probabilities).item()
+        confidence = probabilities[predicted_class_id].item()
+
+        raw_label = model.config.id2label[predicted_class_id]
+        label = CUSTOM_LABELS.get(raw_label, raw_label)
+        all_scores = {
+            CUSTOM_LABELS.get(model.config.id2label[i], model.config.id2label[i]): float(prob)
+            for i, prob in enumerate(probabilities)
+        }
+        return SentimentResponse(label=label, confidence=confidence, all_scores=all_scores)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/")
+def serve_webpage():
+    return FileResponse("index.html")
+
+@app.get("/api/users/history/stats")
+def get_history_stats(user_id: str, db: Session = Depends(get_db)):
+    history = db.query(ListeningHistory).filter(
+        ListeningHistory.user_id == user_id,
+        ListeningHistory.action == "diary"  # liked → diary로 변경
+    ).all()
+    counts = {}
+    for h in history:
+        counts[h.emotion_state] = counts.get(h.emotion_state, 0) + 1
+    return {"emotion_counts": counts}
+
+@app.get("/health")
+def read_root():
+    mode = "Quantized ONNX" if USE_QUANTIZED_MODEL else "Standard PyTorch"
+    return {"status": "Model API is running", "mode": mode, "model_path": MODEL_PATH}
+
+@app.get("/api/users/favorites")
+def get_favorite_tracks(user_id: str, db: Session = Depends(get_db)):
+    # 내가 하트(liked) 누른 곡들만 타임스탬프 최신순으로 가져오기
+    favorites = db.query(ListeningHistory).filter(
+        ListeningHistory.user_id == user_id,
+        ListeningHistory.action == "liked"
+    ).order_by(ListeningHistory.timestamp.desc()).all()
+    
+    # 프론트엔드가 쓰기 편하게 리스트 형태로 정제해서 반환
+    track_list = []
+    for f in favorites:
+        track_list.append({
+            "title": f.track_title,
+            "artist": f.track_artist,
+            "url": f.track_url,
+            "emotion": f.emotion_state
+        })
+    return {"favorites": track_list}

database.py

@@ -0,0 +1,48 @@
+from sqlalchemy import create_engine, Column, String, Integer, DateTime
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+import datetime
+import json
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./app_database.db"
+
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
+)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+class User(Base):
+    __tablename__ = "users"
+
+    user_id = Column(String, primary_key=True, index=True)
+    favorite_artists_json = Column(String, default="[]")
+    favorite_genres_json = Column(String, default="[]")
+    default_tags_json = Column(String, default="[]") # ["k-pop", "korean"]
+
+    def set_preferences(self, artists, genres, tags):
+        self.favorite_artists_json = json.dumps(artists)
+        self.favorite_genres_json = json.dumps(genres)
+        self.default_tags_json = json.dumps(tags)
+
+class ListeningHistory(Base):
+    __tablename__ = "history"
+
+    id = Column(Integer, primary_key=True, index=True, autoincrement=True)
+    user_id = Column(String, index=True)
+    track_title = Column(String)
+    track_artist = Column(String)
+    track_url = Column(String)
+    duration = Column(Integer, default=0)
+    emotion_state = Column(String) # "Sadness"
+    action = Column(String) # "liked", "completed", "skipped"
+    timestamp = Column(DateTime, default=datetime.datetime.utcnow)
+
+Base.metadata.create_all(bind=engine)
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

index.html

@@ -0,0 +1,559 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI 감성 일기 & 음악 추천</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: #FDF8F3;
+    min-height: 100vh;
+    padding: 2rem 1rem;
+    color: #2C2C2A;
+  }
+  .container { max-width: 600px; margin: 0 auto; }
+  .app-header { text-align: center; margin-bottom: 1.5rem; }
+  .app-header h1 { font-size: 1.6rem; font-weight: 600; color: #2C2C2A; letter-spacing: -0.5px; }
+  .app-header p { font-size: 0.9rem; color: #888780; margin-top: 6px; }
+
+  /* 탭 */
+  .tab-bar {
+    display: flex;
+    background: #FFFFFF;
+    border-radius: 16px;
+    border: 1px solid #F0EBE3;
+    padding: 6px;
+    margin-bottom: 1.25rem;
+    gap: 4px;
+  }
+  .tab-btn {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    background: none;
+    border-radius: 12px;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: #888780;
+    cursor: pointer;
+    transition: all 0.18s;
+  }
+  .tab-btn.active {
+    background: #FDF4E7;
+    color: #D4845A;
+  }
+  .tab-btn:hover:not(.active) { background: #F5F0EA; }
+  .tab-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+  .card {
+    background: #FFFFFF;
+    border-radius: 20px;
+    border: 1px solid #F0EBE3;
+    padding: 1.5rem;
+    margin-bottom: 1.25rem;
+    box-shadow: 0 2px 16px rgba(180,160,130,0.07);
+  }
+  .card h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: #2C2C2A; }
+
+  label.field-label {
+    display: block;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #888780;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+    margin-top: 1rem;
+  }
+  input[type="text"], textarea {
+    width: 100%;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1.5px solid #EDE8E0;
+    font-size: 0.95rem;
+    background: #FDFAF7;
+    color: #2C2C2A;
+    transition: border 0.2s;
+    font-family: inherit;
+  }
+  input[type="text"]:focus, textarea:focus {
+    outline: none;
+    border-color: #D4A96A;
+    background: #fff;
+  }
+  textarea { height: 130px; resize: vertical; line-height: 1.6; }
+
+  .intent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0.5rem; }
+  .intent-card {
+    border: 2px solid #EDE8E0;
+    border-radius: 14px;
+    padding: 14px 12px;
+    cursor: pointer;
+    transition: all 0.18s;
+    background: #FDFAF7;
+    text-align: center;
+  }
+  .intent-card:hover { border-color: #D4A96A; background: #FDF4E7; }
+  .intent-card.selected { border-color: #D4A96A; background: #FDF4E7; }
+  .intent-card .intent-icon { font-size: 1.6rem; margin-bottom: 6px; }
+  .intent-card .intent-title { font-size: 0.88rem; font-weight: 600; color: #2C2C2A; }
+  .intent-card .intent-sub { font-size: 0.75rem; color: #888780; margin-top: 3px; }
+
+  .btn-primary {
+    width: 100%;
+    padding: 14px;
+    border-radius: 14px;
+    border: none;
+    background: linear-gradient(135deg, #E8A96A 0%, #D4845A 100%);
+    color: #fff;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 1.25rem;
+    transition: opacity 0.18s, transform 0.12s;
+  }
+  .btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
+  .btn-primary:active { transform: scale(0.98); }
+
+  .btn-secondary {
+    width: 100%;
+    padding: 12px;
+    border-radius: 14px;
+    border: 1.5px solid #EDE8E0;
+    background: #FDFAF7;
+    color: #888780;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    margin-top: 10px;
+    transition: all 0.18s;
+  }
+  .btn-secondary:hover { border-color: #D4A96A; color: #D4845A; }
+
+  .pill-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+  .pill {
+    background: #FDF4E7;
+    color: #A06030;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid #F0D9B8;
+  }
+  .pill .remove { cursor: pointer; color: #C09070; }
+  .pill .remove:hover { color: #A03020; }
+
+  .autocomplete-wrapper { position: relative; }
+  .suggestions {
+    position: absolute; top: 100%; left: 0; right: 0;
+    background: white; border: 1px solid #EDE8E0; border-top: none;
+    z-index: 99; max-height: 150px; overflow-y: auto;
+    border-radius: 0 0 12px 12px;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+  }
+  .suggestions div { padding: 10px 14px; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid #F5F0EA; }
+  .suggestions div:hover { background: #FDF4E7; color: #D4845A; font-weight: 600; }
+
+  .hidden { display: none !important; }
+
+  .emotion-banner {
+    border-radius: 16px;
+    padding: 1.25rem;
+    text-align: center;
+    margin-bottom: 1.25rem;
+  }
+  .emotion-banner .emotion-emoji { font-size: 3rem; display: block; margin-bottom: 8px; }
+  .emotion-banner .emotion-label { font-size: 1.2rem; font-weight: 700; }
+  .emotion-banner .emotion-conf { font-size: 0.85rem; margin-top: 4px; opacity: 0.75; }
+
+  .theme-anger { background: #FDEAEA; color: #8B2020; }
+  .theme-sadness { background: #EAF0FD; color: #1A3A7A; }
+  .theme-anxiety { background: #F0EAFD; color: #5A1A8B; }
+  .theme-hurt { background: #FDEAF4; color: #8B1A55; }
+  .theme-embarrassment { background: #FDFAEA; color: #7A6A10; }
+  .theme-joy { background: #EAFDE8; color: #1A7A30; }
+  .theme-default { background: #FDF4E7; color: #8B5A20; }
+
+  .track-card {
+    background: #FDFAF7;
+    border: 1.5px solid #EDE8E0;
+    border-radius: 14px;
+    padding: 14px 16px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    transition: border-color 0.18s, transform 0.15s;
+  }
+  .track-card:hover { border-color: #D4A96A; transform: translateY(-1px); }
+  .track-num { font-size: 1rem; font-weight: 700; color: #D4A96A; min-width: 24px; text-align: center; }
+  .track-info { flex: 1; min-width: 0; }
+  .track-info a {
+    color: #2C2C2A; text-decoration: none; font-weight: 600; font-size: 0.95rem;
+    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .track-info a:hover { color: #D4845A; }
+  .track-info .artist { font-size: 0.82rem; color: #888780; margin-top: 3px; }
+
+  .like-btn {
+    background: none;
+    border: 1.5px solid #EDE8E0;
+    border-radius: 50%;
+    width: 36px; height: 36px;
+    cursor: pointer; font-size: 1rem;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.18s; flex-shrink: 0;
+  }
+  .like-btn:hover { background: #FDF4E7; border-color: #D4A96A; transform: scale(1.1); }
+  .like-btn.liked { background: #FDF4E7; border-color: #D4A96A; color: #E05555; }
+
+  .loading-area { text-align: center; padding: 2rem; color: #888780; font-size: 0.9rem; }
+  @keyframes dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
+  .loading-dots::after { content: ''; animation: dots 1.5s infinite; }
+
+  .help-text { font-size: 0.78rem; color: #A8A39A; margin-top: 4px; margin-bottom: 2px; }
+
+  /* 히스토리 그래프 */
+  .history-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+  .history-bar-label { font-size: 0.85rem; width: 100px; color: #555; flex-shrink: 0; }
+  .history-bar-track { flex: 1; background: #F0EBE3; border-radius: 8px; height: 24px; overflow: hidden; }
+  .history-bar-fill {
+    height: 100%; border-radius: 8px;
+    display: flex; align-items: center; padding-left: 10px;
+    font-size: 0.75rem; font-weight: 700; color: white;
+    transition: width 0.6s ease; min-width: 36px;
+  }
+  .history-count { font-size: 0.82rem; color: #888780; min-width: 28px; text-align: right; }
+
+  .empty-state { text-align: center; padding: 2rem; color: #A8A39A; font-size: 0.9rem; }
+  .empty-state .empty-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }
+</style>
+</head>
+<body>
+<div class="container">
+
+  <div class="app-header">
+    <h1>🎵 감정 일기 음악 추천</h1>
+    <p>오늘의 감정을 적으면, 딱 맞는 음악을 찾아드려요</p>
+  </div>
+
+  <div id="onboardingSection">
+    <div class="card">
+      <h2>👋 처음 오셨군요!</h2>
+      <p style="font-size:0.88rem; color:#888780;">취향을 알려주시면 더 정확한 추천을 해드릴게요.</p>
+
+      <label class="field-label">사용자 ID</label>
+      <input type="text" id="userId" placeholder="예: user_123" value="user_123">
+
+      <label class="field-label">🎤 좋아하는 아티스트</label>
+      <p class="help-text">쉼표(,)로 구분 (예: IU, Radiohead, 뉴진스)</p>
+      <input type="text" id="favArtists" placeholder="아티스트 입력">
+
+      <label class="field-label">🏷️ 좋아하는 장르</label>
+      <p class="help-text">영어로 좋아하는 장르를 입력해주세요! (예: k-pop, lo-fi)</p>
+      <div class="autocomplete-wrapper">
+        <input type="text" id="tagInput" placeholder=" 장르 검색..." onkeyup="searchTags()" autocomplete="off">
+        <div id="tagSuggestions" class="suggestions"></div>
+      </div>
+      <div id="selectedTags" class="pill-container"></div>
+
+      <button class="btn-primary" onclick="saveProfile()">프로필 저장하고 시작하기 →</button>
+    </div>
+  </div>
+
+  <div id="mainSection" class="hidden">
+
+    <div class="tab-bar">
+      <button class="tab-btn active" id="tab-diary" onclick="switchTab('diary')">📝 일기 쓰기</button>
+      <button class="tab-btn" id="tab-result" onclick="switchTab('result')" disabled>🎶 추천 결과</button>
+      <button class="tab-btn" id="tab-history" onclick="switchTab('history')">📊 감정 기록</button>
+      <button class="tab-btn" id="tab-fav" onclick="switchTab('fav')">💖 좋아요 한 곡</button> 
+    </div>
+
+    <div id="tabDiary">
+      <div class="card">
+        <h2>📝 오늘의 일기</h2>
+        <textarea id="diaryText" placeholder="오늘 하루는 어땠나요? 솔직하게 적어주세요.&#10;&#10;예: 오늘 왠지 공허하고 비가 오는 느낌이었어..."></textarea>
+
+        <label class="field-label" style="margin-top:1.25rem;">🎧 음악 방향</label>
+        <div class="intent-grid">
+          <div class="intent-card selected" id="intentMatch" onclick="selectIntent('match')">
+            <div class="intent-icon">🌊</div>
+            <div class="intent-title">감정에 빠지기</div>
+            <div class="intent-sub">지금 기분 그대로</div>
+          </div>
+          <div class="intent-card" id="intentShift" onclick="selectIntent('shift')">
+            <div class="intent-icon">🌤️</div>
+            <div class="intent-title">기분 전환</div>
+            <div class="intent-sub">다른 감정으로</div>
+          </div>
+        </div>
+
+        <button class="btn-primary" onclick="getRecommendation()">🎵 음악 추천받기</button>
+
+        <div id="loading" class="hidden">
+          <div class="loading-area">감정을 분석하고 있어요<span class="loading-dots"></span></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="tabResult" class="hidden">
+      <div id="emotionBanner" class="emotion-banner theme-default">
+        <span class="emotion-emoji" id="emotionEmoji">🎵</span>
+        <div class="emotion-label" id="emotionLabel">-</div>
+        <div class="emotion-conf" id="emotionConf"></div>
+      </div>
+      <div class="card">
+        <h2 style="margin-bottom:0.75rem;">🎶 추천 플레이리스트</h2>
+        <div id="trackList"></div>
+      </div>
+      <button class="btn-secondary" onclick="resetDiary()">✏️ 새로운 일기 쓰기</button>
+    </div>
+
+    <div id="tabHistory" class="hidden">
+      <div class="card">
+        <h2>📊 내 감정 기록</h2>
+        <p style="font-size:0.82rem; color:#888780; margin-bottom:1.25rem;">일기를 쓸 때마다 감정이 자동으로 기록돼요</p>
+        <div id="historyChart"></div>
+      </div>
+    </div>
+
+    <div id="tabFav" class="hidden">
+        <div class="card">
+            <h2>💖 내가 하트 누른 곡들</h2>
+            <p style="font-size:0.82rem; color:#888780; margin-bottom:1.25rem;">그동안 하트를 눌러 보관한 음악들이에요</p>
+            <div id="favTrackList"></div>
+        </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  let currentUser = "guest";
+  let selectedIntent = "match";
+  let selectedTagsArray = [];
+  let searchTimeout = null;
+
+  const EMOTION_THEMES = {
+    "분노 (Anger)":           { theme: "theme-anger",         emoji: "🔥", color: "#E05555" },
+    "슬픔 (Sadness)":         { theme: "theme-sadness",       emoji: "💧", color: "#5577DD" },
+    "불안 (Anxiety)":         { theme: "theme-anxiety",       emoji: "😰", color: "#8855CC" },
+    "상처 (Hurt)":            { theme: "theme-hurt",          emoji: "💔", color: "#CC5588" },
+    "당황 (Embarrassment)":   { theme: "theme-embarrassment", emoji: "😳", color: "#BBAA22" },
+    "기쁨 (Joy)":             { theme: "theme-joy",           emoji: "✨", color: "#33AA55" },
+  };
+
+  // switchTab 함수 수정 완료 ('fav' 인식)
+  function switchTab(tab) {
+    ['diary','result','history','fav'].forEach(t => {
+      document.getElementById(`tab-${t}`).classList.toggle('active', t === tab);
+      document.getElementById(`tab${t.charAt(0).toUpperCase()+t.slice(1)}`).classList.toggle('hidden', t !== tab);
+    });
+    if (tab === 'history') loadHistoryChart();
+    if (tab === 'fav') loadFavoriteTracks();
+  }
+
+  function selectIntent(intent) {
+    selectedIntent = intent;
+    document.getElementById('intentMatch').classList.toggle('selected', intent === 'match');
+    document.getElementById('intentShift').classList.toggle('selected', intent === 'shift');
+  }
+
+  async function searchTags() {
+    clearTimeout(searchTimeout);
+    const q = document.getElementById('tagInput').value;
+    if (q.length < 1) { document.getElementById('tagSuggestions').innerHTML = ""; return; }
+    searchTimeout = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/tags/autocomplete?q=${q}`);
+        const data = await res.json();
+        const container = document.getElementById('tagSuggestions');
+        container.innerHTML = "";
+        (data.tags || []).forEach(t => {
+          const div = document.createElement('div');
+          div.innerText = t;
+          div.onclick = () => addTag(t);
+          container.appendChild(div);
+        });
+      } catch(e) {}
+    }, 300);
+  }
+
+  function addTag(tag) {
+    if (!selectedTagsArray.includes(tag)) { selectedTagsArray.push(tag); renderTags(); }
+    document.getElementById('tagInput').value = '';
+    document.getElementById('tagSuggestions').innerHTML = '';
+  }
+
+  function renderTags() {
+    document.getElementById('selectedTags').innerHTML = selectedTagsArray.map(t =>
+      `<div class="pill">${t} <span class="remove" onclick="removeTag('${t}')">✕</span></div>`
+    ).join('');
+  }
+
+  function removeTag(tag) {
+    selectedTagsArray = selectedTagsArray.filter(t => t !== tag);
+    renderTags();
+  }
+
+  async function saveProfile() {
+    const userId = document.getElementById('userId').value;
+    if (!userId) { alert("사용자 ID를 입력해주세요!"); return; }
+    const artists = document.getElementById('favArtists').value.split(',').map(s=>s.trim()).filter(s=>s);
+    
+    try {
+      await fetch('/api/users/onboard', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ user_id: userId, favorite_artists: artists, favorite_genres: [], default_tags: selectedTagsArray })
+      });
+      currentUser = userId;
+      document.getElementById('onboardingSection').classList.add('hidden');
+      document.getElementById('mainSection').classList.remove('hidden');
+    } catch(e) { alert("서버 연결에 실패했습니다."); }
+  }
+
+  async function getRecommendation() {
+    const text = document.getElementById('diaryText').value;
+    if (!text.trim()) { alert("일기를 먼저 작성해주세요!"); return; }
+
+    document.getElementById('loading').classList.remove('hidden');
+
+    try {
+      const res = await fetch('/recommend', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ user_id: currentUser, text, intent: selectedIntent })
+      });
+      const data = await res.json();
+      document.getElementById('loading').classList.add('hidden');
+
+      const emotionInfo = EMOTION_THEMES[data.emotion] || { theme: 'theme-default', emoji: '🎵', color: '#D4A96A' };
+      const banner = document.getElementById('emotionBanner');
+      banner.className = `emotion-banner ${emotionInfo.theme}`;
+      document.getElementById('emotionEmoji').innerText = emotionInfo.emoji;
+      document.getElementById('emotionLabel').innerText = data.emotion;
+      document.getElementById('emotionConf').innerText = `신뢰도 ${(data.confidence * 100).toFixed(1)}%`;
+
+      const trackList = document.getElementById('trackList');
+      trackList.innerHTML = "";
+      data.tracks.forEach((track, i) => {
+        const escTitle = track.title.replace(/'/g,"\\'");
+        const escArtist = track.artist.replace(/'/g,"\\'");
+        const escUrl = track.url.replace(/'/g,"\\'");
+        const escEmotion = data.emotion.replace(/'/g,"\\'");
+        trackList.innerHTML += `
+          <div class="track-card">
+            <div class="track-num">${i+1}</div>
+            <div class="track-info">
+              <a href="${track.url}" target="_blank">${track.title}</a>
+              <div class="artist">🎤 ${track.artist}</div>
+            </div>
+            <button class="like-btn" id="like-${i}" onclick="likeTrack('${escTitle}','${escArtist}','${escUrl}','${escEmotion}',${i})" title="좋아요">♡</button>
+          </div>`;
+      });
+
+      // 추천이 완료되면 추천 결과 탭 disabled 해제하고 전환
+      document.getElementById('tab-result').disabled = false;
+      switchTab('result');
+
+    } catch(e) {
+      document.getElementById('loading').classList.add('hidden');
+      alert("오류가 발생했습니다. 백엔드가 실행 중인지 확인해주세요.");
+    }
+  }
+
+  async function loadHistoryChart() {
+    const chart = document.getElementById('historyChart');
+    chart.innerHTML = '<div class="loading-area">불러오는 중<span class="loading-dots"></span></div>';
+    try {
+      const res = await fetch(`/api/users/history/stats?user_id=${currentUser}`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const counts = data.emotion_counts || {};
+
+      if (Object.keys(counts).length === 0) {
+        chart.innerHTML = `<div class="empty-state"><span class="empty-icon">📝</span>아직 기록이 없어요!<br>일기를 쓰면 감정이 자동으로 기록돼요</div>`;
+        return;
+      }
+
+      const max = Math.max(...Object.values(counts));
+      const emotionMeta = {
+        "분노 (Anger)":         { emoji: "🔥", color: "#E05555" },
+        "슬픔 (Sadness)":       { emoji: "💧", color: "#5577DD" },
+        "불안 (Anxiety)":       { emoji: "😰", color: "#8855CC" },
+        "상처 (Hurt)":          { emoji: "💔", color: "#CC5588" },
+        "당황 (Embarrassment)": { emoji: "😳", color: "#BBAA22" },
+        "기쁨 (Joy)":           { emoji: "✨", color: "#33AA55" },
+      };
+
+      chart.innerHTML = Object.entries(counts).sort((a,b) => b[1]-a[1]).map(([emotion, count]) => {
+        const meta = emotionMeta[emotion] || { emoji: "🎵", color: "#D4A96A" };
+        const pct = Math.round((count / max) * 100);
+        return `
+          <div class="history-bar-wrap">
+            <div class="history-bar-label">${meta.emoji} ${emotion.split(' ')[0]}</div>
+            <div class="history-bar-track">
+              <div class="history-bar-fill" style="width:${pct}%; background:${meta.color};">${count}번</div>
+            </div>
+            <div class="history-count">${count}</div>
+          </div>`;
+      }).join('');
+    } catch(e) {
+      chart.innerHTML = `<div class="empty-state"><span class="empty-icon">😅</span>불러오기 실패. 백엔드 확인해주세요.</div>`;
+    }
+  }
+
+  function resetDiary() {
+    document.getElementById('diaryText').value = '';
+    switchTab('diary');
+  }
+
+  async function likeTrack(title, artist, url, emotion, idx) {
+    const btn = document.getElementById(`like-${idx}`);
+    btn.classList.add('liked');
+    btn.innerText = '♥';
+    try {
+      await fetch('/api/users/history', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ user_id: currentUser, track_title: title, track_artist: artist, track_url: url, duration: 0, emotion_state: emotion, action: "liked" })
+      });
+    } catch(e) { console.error("좋아요 저장 실패", e); }
+  }
+
+  // 하트 누른 곡들을 리스트로 그려주는 함수 추가 완료
+  async function loadFavoriteTracks() {
+    const container = document.getElementById('favTrackList');
+    container.innerHTML = '<div class="loading-area">불러오는 중<span class="loading-dots"></span></div>';
+    
+    try {
+      const res = await fetch(`/api/users/favorites?user_id=${currentUser}`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const favs = data.favorites || [];
+
+      if (favs.length === 0) {
+        container.innerHTML = `<div class="empty-state"><span class="empty-icon">🎵</span>아직 하트를 누른 곡이 없어요!<br>추천 결과에서 마음에 드는 곡에 하트를 눌러보세요.</div>`;
+        return;
+      }
+
+      container.innerHTML = favs.map((track, i) => `
+        <div class="track-card">
+          <div class="track-num" style="color: #E8A96A;">💖</div>
+          <div class="track-info">
+            <a href="${track.url}" target="_blank">${track.title}</a>
+            <div class="artist">🎤 ${track.artist} <span style="font-size:0.75rem; color:#D4845A; margin-left:6px;">(${track.emotion.split(' ')[0]})</span></div>
+          </div>
+        </div>
+      `).join('');
+    } catch(e) {
+      container.innerHTML = `<div class="empty-state"><span class="empty-icon">😅</span>불러오기 실패. 백엔드를 확인해주세요.</div>`;
+    }
+  }
+</script>
+</body>
+</html>

models/fp32/config.json

@@ -0,0 +1,50 @@
+{
+  "add_cross_attention": false,
+  "architectures": [
+    "ElectraForSequenceClassification"
+  ],
+  "attention_probs_dropout_prob": 0.1,
+  "bos_token_id": null,
+  "classifier_dropout": null,
+  "dtype": "float32",
+  "embedding_size": 768,
+  "eos_token_id": null,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "LABEL_0",
+    "1": "LABEL_1",
+    "2": "LABEL_2",
+    "3": "LABEL_3",
+    "4": "LABEL_4",
+    "5": "LABEL_5"
+  },
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "is_decoder": false,
+  "label2id": {
+    "LABEL_0": 0,
+    "LABEL_1": 1,
+    "LABEL_2": 2,
+    "LABEL_3": 3,
+    "LABEL_4": 4,
+    "LABEL_5": 5
+  },
+  "layer_norm_eps": 1e-12,
+  "max_position_embeddings": 512,
+  "model_type": "electra",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "pad_token_id": 3,
+  "summary_activation": "gelu",
+  "summary_last_dropout": 0.1,
+  "summary_type": "first",
+  "summary_use_proj": true,
+  "tie_word_embeddings": true,
+  "tokenizer_class": "PreTrainedTokenizerFast",
+  "transformers_version": "5.0.0",
+  "type_vocab_size": 2,
+  "use_cache": true,
+  "vocab_size": 30000
+}

models/fp32/model.safetensors

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:50eec0c758b53ff9a2b9ab289b45cd4426ae03f16e4553111ba6cde7aec0a4f5
+size 436367936

models/onnx_model_fp32/config.json

@@ -0,0 +1,46 @@
+{
+  "architectures": [
+    "ElectraForSequenceClassification"
+  ],
+  "attention_probs_dropout_prob": 0.1,
+  "classifier_dropout": null,
+  "dtype": "float32",
+  "embedding_size": 768,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "LABEL_0",
+    "1": "LABEL_1",
+    "2": "LABEL_2",
+    "3": "LABEL_3",
+    "4": "LABEL_4",
+    "5": "LABEL_5"
+  },
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "label2id": {
+    "LABEL_0": 0,
+    "LABEL_1": 1,
+    "LABEL_2": 2,
+    "LABEL_3": 3,
+    "LABEL_4": 4,
+    "LABEL_5": 5
+  },
+  "layer_norm_eps": 1e-12,
+  "max_position_embeddings": 512,
+  "model_type": "electra",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "pad_token_id": 3,
+  "position_embedding_type": "absolute",
+  "summary_activation": "gelu",
+  "summary_last_dropout": 0.1,
+  "summary_type": "first",
+  "summary_use_proj": true,
+  "tokenizer_class": "PreTrainedTokenizerFast",
+  "transformers_version": "4.57.6",
+  "type_vocab_size": 2,
+  "use_cache": true,
+  "vocab_size": 30000
+}

models/onnx_model_fp32/model.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e30f7ee46f33df92a8bde3adc05af9876457b2a7ac78fc777b05bd438fac60c3
+size 436544001

models/onnx_model_int8/config.json

@@ -0,0 +1,46 @@
+{
+  "architectures": [
+    "ElectraForSequenceClassification"
+  ],
+  "attention_probs_dropout_prob": 0.1,
+  "classifier_dropout": null,
+  "dtype": "float32",
+  "embedding_size": 768,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "LABEL_0",
+    "1": "LABEL_1",
+    "2": "LABEL_2",
+    "3": "LABEL_3",
+    "4": "LABEL_4",
+    "5": "LABEL_5"
+  },
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "label2id": {
+    "LABEL_0": 0,
+    "LABEL_1": 1,
+    "LABEL_2": 2,
+    "LABEL_3": 3,
+    "LABEL_4": 4,
+    "LABEL_5": 5
+  },
+  "layer_norm_eps": 1e-12,
+  "max_position_embeddings": 512,
+  "model_type": "electra",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "pad_token_id": 3,
+  "position_embedding_type": "absolute",
+  "summary_activation": "gelu",
+  "summary_last_dropout": 0.1,
+  "summary_type": "first",
+  "summary_use_proj": true,
+  "tokenizer_class": "PreTrainedTokenizerFast",
+  "transformers_version": "4.57.6",
+  "type_vocab_size": 2,
+  "use_cache": true,
+  "vocab_size": 30000
+}

models/onnx_model_int8/model.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c4b5047ec02ccf96140d28d34414f5506d3f5f69870bfa6d1efbc166d192036a
+size 109873286

models/onnx_model_int8/ort_config.json

@@ -0,0 +1,33 @@
+{
+  "one_external_file": true,
+  "opset": null,
+  "optimization": {},
+  "quantization": {
+    "activations_dtype": "QUInt8",
+    "activations_symmetric": false,
+    "format": "QOperator",
+    "is_static": false,
+    "mode": "IntegerOps",
+    "nodes_to_exclude": [],
+    "nodes_to_quantize": [],
+    "operators_to_quantize": [
+      "Conv",
+      "MatMul",
+      "Attention",
+      "LSTM",
+      "Gather",
+      "Transpose",
+      "EmbedLayerNormalization"
+    ],
+    "per_channel": false,
+    "qdq_add_pair_to_weight": false,
+    "qdq_dedicated_pair": false,
+    "qdq_op_type_per_channel_support_to_axis": {
+      "MatMul": 1
+    },
+    "reduce_range": false,
+    "weights_dtype": "QUInt8",
+    "weights_symmetric": true
+  },
+  "use_external_data_format": false
+}

requirements.txt

@@ -0,0 +1,9 @@
+transformers
+torch
+optimum[onnxruntime]
+fastapi
+uvicorn
+pydantic
+python-dotenv
+httpx
+sqlalchemy

tokenizer/tokenizer_config.json

@@ -0,0 +1,16 @@
+{
+  "backend": "tokenizers",
+  "cls_token": "[CLS]",
+  "do_basic_tokenize": true,
+  "do_lower_case": false,
+  "is_local": false,
+  "mask_token": "[MASK]",
+  "model_max_length": 512,
+  "never_split": null,
+  "pad_token": "[PAD]",
+  "sep_token": "[SEP]",
+  "strip_accents": null,
+  "tokenize_chinese_chars": true,
+  "tokenizer_class": "PreTrainedTokenizerFast",
+  "unk_token": "[UNK]"
+}