Update app.py

app.py

@@ -1,11 +1,9 @@
-# app.py
+# app_updated.py
 """
 Voice→Place Recommender (Streamlit / Hugging Face Spaces)
 - 日本語音声感情認識：S3PRL(HuBERT base) + HFの下流(.ckpt)を用いてJTES(4感情)推定
-- Spaces → Settings → Secrets に HF_TOKEN（Read権限）を設定
-- 可能なら KUSHINADA_FILENAME で ckpt を明示指定（例: s3prl/result/downstream/.../dev-best.ckpt）
-- apt.txt: ffmpeg, （任意で）fonts-ipaexfont, fonts-noto-cjk
-- requirements.txt: streamlit-audiorecorder, s3prl==0.4.17, torch==2.0.1, torchaudio==2.0.2 など
+- 音声波形表示機能を追加
+- SNS共有ボタンを追加
 """
 
 # ===== 基本インポート =====
@@ -13,6 +11,8 @@ import io, base64, os, random
 import numpy as np
 import soundfile as sf
 from pydub import AudioSegment
+import urllib.parse
+from datetime import datetime
 
 import streamlit as st
 from audiorecorder import audiorecorder
@@ -31,6 +31,10 @@ import torch.nn as nn
 from huggingface_hub import HfApi, hf_hub_download
 from s3prl.nn import S3PRLUpstream, Featurizer
 
+# Librosa for waveform
+import librosa
+import librosa.display
+
 # ===== フォント設定（日本語） =====
 jp_candidates = ["IPAexGothic", "IPAGothic", "Noto Sans CJK JP", "Noto Sans CJK"]
 for name in jp_candidates:
@@ -287,6 +291,41 @@ def audio_player_bytes(b: bytes, mime="audio/wav"):
         unsafe_allow_html=True,
     )
 
+# ===== 音声波形表示機能を追加 =====
+def create_waveform_visualization(audio_bytes):
+    """音声波形を可視化"""
+    if audio_bytes is None:
+        return None
+    
+    try:
+        # バイトデータから音声を読み込み
+        y, sr = sf.read(io.BytesIO(audio_bytes), dtype="float32")
+        
+        # 図の作成
+        fig, (ax1, ax2) = plt.subplots(2, 1, figsize=(12, 6), dpi=100)
+        
+        # 波形表示
+        librosa.display.waveshow(y, sr=sr, ax=ax1, color='#4169E1', alpha=0.8)
+        ax1.set_title('Audio Waveform', fontsize=14, fontweight='bold')
+        ax1.set_xlabel('Time (s)')
+        ax1.set_ylabel('Amplitude')
+        ax1.grid(True, alpha=0.3)
+        
+        # スペクトログラム
+        D = librosa.stft(y)
+        DB = librosa.amplitude_to_db(abs(D), ref=np.max)
+        img = librosa.display.specshow(DB, sr=sr, x_axis='time', y_axis='hz', ax=ax2)
+        ax2.set_title('Spectrogram', fontsize=14, fontweight='bold')
+        fig.colorbar(img, ax=ax2, format='%+2.0f dB')
+        
+        plt.tight_layout()
+        
+        return fig
+    
+    except Exception as e:
+        st.error(f"波形表示エラー: {e}")
+        return None
+
 # ===== フォールバック（簡易特徴量） =====
 def extract_features(y, sr):
     abs_y = np.abs(y)
@@ -480,6 +519,49 @@ def plot_emotion_map(emotion_label, scores, method="AI"):
                   fontsize=14, fontweight='bold')
     plt.tight_layout(); return fig
 
+# ===== SNS共有ボタン機能を追加 =====
+def create_share_buttons(emotion_label, place_name):
+    """SNS共有ボタンを生成"""
+    # 共有用のテキスト
+    share_text = f"Voice × Place Labで感情「{emotion_label}」と診断されました！おすすめの場所は「{place_name}」です。"
+    encoded_text = urllib.parse.quote(share_text)
+    
+    # 現在のページURL（実際のデプロイURLに置き換える必要があります）
+    page_url = "https://your-app-url.com"
+    encoded_url = urllib.parse.quote(page_url)
+    
+    # Twitter共有リンク
+    twitter_url = f"https://twitter.com/intent/tweet?text={encoded_text}&url={encoded_url}"
+    
+    # Facebook共有リンク
+    facebook_url = f"https://www.facebook.com/sharer/sharer.php?u={encoded_url}"
+    
+    # LINE共有リンク
+    line_url = f"https://line.me/R/msg/text/?{encoded_text}%20{encoded_url}"
+    
+    # ボタンのHTML
+    share_html = f"""
+    <div style='display: flex; gap: 10px; margin: 20px 0;'>
+        <a href='{twitter_url}' target='_blank' style='text-decoration: none;'>
+            <div style='background: #1DA1F2; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block;'>
+                🐦 Twitterで共有
+            </div>
+        </a>
+        <a href='{facebook_url}' target='_blank' style='text-decoration: none;'>
+            <div style='background: #4267B2; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block;'>
+                📘 Facebookで共有
+            </div>
+        </a>
+        <a href='{line_url}' target='_blank' style='text-decoration: none;'>
+            <div style='background: #00B900; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block;'>
+                💬 LINEで共有
+            </div>
+        </a>
+    </div>
+    """
+    
+    return share_html
+
 # ===== メイン =====
 def main():
     st.set_page_config(page_title="Voice→Place Recommender", page_icon="🎙️", layout="centered")
@@ -506,7 +588,7 @@ def main():
             st.session_state["wav_bytes"] = buf.getvalue()
             audio_player_bytes(st.session_state["wav_bytes"], mime="audio/wav")
             st.caption(f"録音サイズ: {len(st.session_state['wav_bytes']) / 1024:.1f} KB")
-        if st.button("🧹 クリアして新しく録音", width="stretch"):
+        if st.button("🧹 クリアして新しく録音", key="clear_rec"):
             for k in ["wav_bytes","recs","feat","emotion_label","scores","method"]:
                 st.session_state[k] = None
             st.session_state["rec_key"] += 1; st.rerun()
@@ -533,7 +615,7 @@ def main():
 
     analysis_method = st.radio("分析方法", ["AIモデル（推奨）", "音声特徴量ベース"], horizontal=True)
 
-    if st.button("🔍 推定 & レコメンド", type="primary", width="stretch",
+    if st.button("🔍 推定 & レコメンド", type="primary",
                  disabled=(st.session_state["wav_bytes"] is None)):
         with st.spinner('感情を分析中...'):
             raw_bytes = st.session_state["wav_bytes"]
@@ -575,30 +657,42 @@ def main():
         st.subheader("感情分析結果")
         fig = plot_emotion_map(emotion_label, scores, method)
         st.pyplot(fig, clear_figure=True)
+        
+        # 音声波形の表示
+        st.subheader("音声波形分析")
+        waveform_fig = create_waveform_visualization(st.session_state["wav_bytes"])
+        if waveform_fig:
+            st.pyplot(waveform_fig, clear_figure=True)
 
         st.subheader("3) おすすめ（上位4件）")
         cols = st.columns(4)
         for i, p in enumerate(recs[:4]):
             with cols[i % 4]:
-                if "image" in p: st.image(p["image"], width="stretch")
+                if "image" in p: st.image(p["image"], use_column_width=True)
                 st.markdown(f"**{p['name']}**"); st.caption(f"タグ: {', '.join(p['tags'])}")
 
         st.subheader("4) 評価")
         choice_name = st.selectbox("第一候補を選んでください", [p["name"] for p in recs[:4]])
         rating_like = st.slider("行ってみたい度（★）", 1, 5, 4)
         rating_vibe = st.slider("気分に合う度（🎯）", 1, 5, 4)
-        reasons = st.multiselect("理由タグ（1–3個）", REASON_TAGS, max_selections=3)
+        reasons = st.multiselect("理由タグ（1—3個）", REASON_TAGS, max_selections=3)
         comment = st.text_input("ひとことコメント（任意・20字）", max_chars=20)
-        if st.button("💾 ログ保存", width="stretch"):
+        
+        # SNS共有ボタンの表示
+        st.subheader("5) SNSで共有")
+        share_html = create_share_buttons(display_emotion, choice_name)
+        st.markdown(share_html, unsafe_allow_html=True)
+        
+        if st.button("💾 ログ保存", key="save_log"):
             consent_research = (consent == "匿名で保存する")
             if not consent_research: st.info("体験のみモードです。研究ログは保存しません。")
             else: st.success("保存機能は開発中です。")
 
     st.divider()
-    if st.button("▶ 次の人を録音する（状態をクリア）", width="stretch"):
+    if st.button("▶ 次の人を録音する（状態をクリア）", key="next_person"):
         for k in ["wav_bytes","recs","emotion_label","scores","method"]:
             st.session_state[k] = None
         st.session_state["rec_key"] += 1; st.rerun()
 
 if __name__ == "__main__":
-    main()
+    main()