change desing and result

app.py

@@ -5,10 +5,8 @@ import librosa
 import numpy as np
 from inference import inference
 from huggingface_hub import hf_hub_download
-import os
 from pathlib import Path
 
-
 def download_models_from_hub():
     """
     Download model checkpoints from Hugging Face Model Hub
@@ -16,7 +14,6 @@ def download_models_from_hub():
     model_dir = Path("checkpoints")
     model_dir.mkdir(exist_ok=True)
     
-    # Original checkpoint filenames on HF Hub
     models = {
         "main": "EmbeddingModel_MERT_768-epoch=0073-val_loss=0.1058-val_acc=0.9585-val_f1=0.9366-val_precision=0.9936-val_recall=0.8857.ckpt",
         "backup": "step=007000-val_loss=0.1831-val_acc=0.9278.ckpt"
@@ -47,179 +44,64 @@ def download_models_from_hub():
 def detect_ai_audio(audio_file):
     """
     Detect whether the uploaded audio file was generated by AI
+    and format the result based on the standardized output.
     """
     if audio_file is None:
-        return """
-        <div style="text-align: center; padding: 20px; border-radius: 10px; background: linear-gradient(135deg, #ff6b6b22, #ff6b6b11);">
-            <div style="font-size: 18px; color: #ff6b6b;">⚠️ Please upload an audio file</div>
-        </div>
-        """
-    
+        return "<div>⚠️ Please upload an audio file.</div>"
+
     try:
-        result = inference(audio_file)
-        
-        # Format result with better styling
-        if "AI" in str(result).upper() or "artificial" in str(result).lower() or "fake" in str(result).lower():
-            status = "AI Generated"
-            color = "#ff6b6b"
-            confidence = "High confidence this audio was generated by AI"
-        else:
-            status = "Human Generated"  
-            color = "#51cf66"
-            confidence = "High confidence this audio was created by humans"
-        
+        result = inference(audio_file)  # {'prediction': 'Fake', 'confidence': '93.80', ...}
+
+        prediction = result.get('prediction', 'Unknown')
+        confidence = result.get('confidence', '0.00')
+        fake_prob = result.get('fake_probability', '0.0')
+        real_prob = result.get('real_probability', '0.0')
+        raw_output = result.get('raw_output', '')
+
         formatted_result = f"""
-        <div style="text-align: center; padding: 25px; border-radius: 15px; background: linear-gradient(135deg, {color}22, {color}11); border: 2px solid {color}33;">
-            <div style="font-size: 28px; font-weight: bold; color: {color}; margin-bottom: 10px;">{status}</div>
-            <div style="font-size: 16px; color: #666; margin-bottom: 8px;">{confidence}</div>
-            <div style="font-size: 14px; color: #888;">Raw output: {result}</div>
+        <div style="text-align: center; padding: 15px; border-radius: 10px; border: 1px solid #ccc;">
+            <h2>Prediction: {prediction}</h2>
+            <p>Confidence: {confidence}%</p>
+            <p>Fake Probability: {float(fake_prob)*100:.2f}%</p>
+            <p>Real Probability: {float(real_prob)*100:.2f}%</p>
+            <p>Raw Output: {raw_output}</p>
         </div>
         """
-        
         return formatted_result
-        
+
     except Exception as e:
-        error_result = f"""
-        <div style="text-align: center; padding: 20px; border-radius: 10px; background: linear-gradient(135deg, #ff6b6b22, #ff6b6b11);">
-            <div style="font-size: 20px; font-weight: bold; color: #ff6b6b; margin-bottom: 8px;">Error</div>
-            <div style="font-size: 14px; color: #666;">Failed to process audio: {str(e)}</div>
-        </div>
-        """
-        return error_result
+        return f"<div>Error processing audio: {str(e)}</div>"
 
-# Custom CSS for modern design
+# 심플하고 깔끔한 CSS
 custom_css = """
-/* Global background gradient */
-.gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    min-height: 100vh;
-}
-
-/* Main container styling */
-.main-container {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(10px) !important;
-    border-radius: 20px !important;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
-    margin: 20px !important;
-    padding: 30px !important;
-}
-
-/* Title styling */
-h1 {
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    text-align: center !important;
-    font-size: 3em !important;
-    font-weight: 800 !important;
-    margin-bottom: 10px !important;
-}
-
-/* Description text */
-.gradio-markdown p {
-    text-align: center !important;
-    font-size: 1.2em !important;
-    color: #555 !important;
-    margin-bottom: 30px !important;
-}
-
-/* Audio upload component */
-.upload-container {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    border: none !important;
-    box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3) !important;
-    transition: all 0.3s ease !important;
-}
-
-.upload-container:hover {
-    transform: translateY(-5px) !important;
-    box-shadow: 0 15px 40px rgba(240, 147, 251, 0.4) !important;
-}
-
-/* Output container */
-.output-container {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    border: none !important;
-    box-shadow: 0 10px 30px rgba(168, 237, 234, 0.3) !important;
-    min-height: 150px !important;
-}
-
-/* Button styling */
-.gr-button {
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    border: none !important;
-    border-radius: 25px !important;
-    padding: 12px 30px !important;
-    font-weight: 600 !important;
-    color: white !important;
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
-}
-
-/* Animation */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.gradio-container > div {
-    animation: fadeInUp 0.8s ease-out !important;
-}
-
-/* Responsive design */
+.gradio-container { background: #f5f5f5 !important; min-height: 100vh; }
+.main-container { background: #ffffff !important; border-radius: 15px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; margin: 20px auto !important; padding: 30px !important; max-width: 800px; }
+h1 { text-align: center !important; font-size: 2.5em !important; font-weight: 700 !important; margin-bottom: 15px !important; color: #333 !important; }
+.gradio-markdown p { text-align: center !important; font-size: 1.1em !important; color: #555 !important; margin-bottom: 20px !important; }
+.upload-container { background: #f0f0f0 !important; border-radius: 10px !important; padding: 15px !important; border: 1px solid #ccc !important; margin-bottom: 20px !important; }
+.output-container { background: #fafafa !important; border-radius: 10px !important; padding: 15px !important; border: 1px solid #ccc !important; min-height: 150px !important; }
+.gr-button { background: #667eea !important; color: #fff !important; border: none !important; border-radius: 20px !important; padding: 10px 25px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }
+.gr-button:hover { background: #5563c1 !important; transform: translateY(-2px) !important; }
 @media (max-width: 768px) {
-    h1 {
-        font-size: 2em !important;
-    }
-    
-    .main-container {
-        margin: 10px !important;
-        padding: 20px !important;
-    }
+    h1 { font-size: 2em !important; }
+    .main-container { margin: 10px !important; padding: 20px !important; }
 }
 """
 
-# Initialize the app
+# 초기화
 print("🚀 Starting FST AI Audio Detection App...")
 print("📦 Initializing models...")
-
-# Download models at startup
 models = download_models_from_hub()
-
-# Check if main model is available
 if models.get("main"):
     print("✅ Main model ready for inference")
 else:
     print("⚠️ Warning: Main model not available, app may not work properly")
 
-# Create Gradio interface
+# Gradio 인터페이스
 demo = gr.Interface(
     fn=detect_ai_audio,
-    inputs=gr.Audio(
-        type="filepath", 
-        label="Upload Audio File",
-        elem_classes=["upload-container"]
-    ),
-    outputs=gr.HTML(
-        label="Detection Result",
-        elem_classes=["output-container"]
-    ),
+    inputs=gr.Audio(type="filepath", label="Upload Audio File", elem_classes=["upload-container"]),
+    outputs=gr.HTML(label="Detection Result", elem_classes=["output-container"]),
     title="AI Audio Detector",
     description="""
     <div style="text-align: center; font-size: 1.2em; color: #555; margin: 20px 0;">
@@ -240,10 +122,4 @@ demo = gr.Interface(
 )
 
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=True,
-        show_api=False,
-        show_error=True
-    )
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=True, show_api=False, show_error=True)

inference.py

@@ -241,8 +241,7 @@ def inference(audio_path):
     
     # 결과 출력
     print(f"Results: {results}")
-    asdf
-    
+
 
     
     return results