docker conflict

app.py

@@ -1,14 +1,112 @@
-from flask import Flask, request, jsonify, render_template, send_from_directory
+from flask import Flask, request, jsonify, render_template, send_from_directory,redirect, make_response, Response, session
 import base64
 from pydub import AudioSegment  # 変換用にpydubをインポート
 import os
 import shutil
-from process import AudioProcessor
-from dotenv import load_dotenv
+import numpy as np
+import string
+import random
+from datetime import datetime, timedelta
+from pyannote.audio import Model, Inference
+from pydub import AudioSegment
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required
+from database import db 
+from users import Users
+from werkzeug.security import generate_password_hash, check_password_hash
+
+# Hugging Face のトークン取得（環境変数 HF に設定）
+#hf_token = os.environ.get("HF")
+hf_token = "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"
+if hf_token is None:
+    raise ValueError("HUGGINGFACE_HUB_TOKEN が設定されていません。")
+
+# キャッシュディレクトリの作成（書き込み可能な /tmp を利用）
+cache_dir = "/tmp/hf_cache"
+os.makedirs(cache_dir, exist_ok=True)
+
+# pyannote モデルの読み込み
+model = Model.from_pretrained("pyannote/embedding", use_auth_token=hf_token, cache_dir=cache_dir)
+inference = Inference(model)
 
-process=AudioProcessor()
 app = Flask(__name__)
 
+app.config['SECRET_KEY'] = os.urandom(24)
+# データベース設定
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# db を Flask アプリに紐づける
+db.init_app(app)
+
+# Flask-Login の設定
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = "login"
+
+@login_manager.user_loader
+def load_user(user_id):
+    return Users.query.get(int(user_id))
+
+def cosine_similarity(vec1, vec2):
+    vec1 = vec1 / np.linalg.norm(vec1)
+    vec2 = vec2 / np.linalg.norm(vec2)
+    return np.dot(vec1, vec2)
+
+def segment_audio(path, target_path='/tmp/setup_voice', seg_duration=1.0):
+    """
+    音声を指定秒数ごとに分割する。
+    target_path に分割したファイルを保存し、元の音声の総長（ミリ秒）を返す。
+    """
+    os.makedirs(target_path, exist_ok=True)
+    base_sound = AudioSegment.from_file(path)
+    duration_ms = len(base_sound)
+    seg_duration_ms = int(seg_duration * 1000)
+    
+    for i, start in enumerate(range(0, duration_ms, seg_duration_ms)):
+        end = min(start + seg_duration_ms, duration_ms)
+        segment = base_sound[start:end]
+        segment.export(os.path.join(target_path, f'{i}.wav'), format="wav")
+    
+    return target_path, duration_ms
+
+def calculate_similarity(path1, path2):
+    embedding1 = inference(path1)
+    embedding2 = inference(path2)
+    return float(cosine_similarity(embedding1.data.flatten(), embedding2.data.flatten()))
+
+def process_audio(reference_path, input_path, output_folder='/tmp/data/matched_segments', seg_duration=1.0, threshold=0.5):
+    """
+    入力音声ファイルを seg_duration 秒ごとに分割し、各セグメントと参照音声の類似度を計算。
+    類似度が threshold を超えたセグメントを output_folder にコピーし、マッチした時間（ms）と
+    マッチしなかった時間（ms）を返す。
+    """
+    os.makedirs(output_folder, exist_ok=True)
+    segmented_path, total_duration_ms = segment_audio(input_path, seg_duration=seg_duration)
+    
+    matched_time_ms = 0
+    for file in sorted(os.listdir(segmented_path)):
+        segment_file = os.path.join(segmented_path, file)
+        similarity = calculate_similarity(segment_file, reference_path)
+        if similarity > threshold:
+            shutil.copy(segment_file, output_folder)
+            matched_time_ms += len(AudioSegment.from_file(segment_file))
+    
+    unmatched_time_ms = total_duration_ms - matched_time_ms
+    return matched_time_ms, unmatched_time_ms
+
+def generate_random_string(length):
+    letters = string.ascii_letters + string.digits
+    return ''.join(random.choice(letters) for i in range(length))
+
+def generate_filename(random_length):
+    random_string = generate_random_string(random_length)
+    current_time = datetime.now().strftime("%Y%m%d%H%M%S")
+    filename = f"{current_time}_{random_string}.wav"
+    return filename
+
+
+
 load_dotenv()  # .env ファイルを読み込む
 HUGGINGFACE_HUB_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
 if not HUGGINGFACE_HUB_TOKEN:
@@ -16,19 +114,71 @@ if not HUGGINGFACE_HUB_TOKEN:
 
 # トップページ（テンプレート: index.html）
 @app.route('/')
-@app.route('/index', methods=['GET', 'POST'])
+def top():
+    return redirect('/login')
+
+# ログイン後画面
+@app.route('/after')
+@login_required # ログインしているユーザのみアクセス許可
 def index():
-    return render_template('index.html')
+    users = Users.query.order_by(Users.id).all()
+    return render_template('index.html', users=users)
+
+@app.route('/index', methods=['GET', 'POST'])
+def index_page():
+    users = Users.query.order_by(Users.id).all()
+    return render_template('index.html', users=users)
 
 # フィードバック画面（テンプレート: feedback.html）
 @app.route('/feedback', methods=['GET', 'POST'])
 def feedback():
-    return render_template('feedback.html')
+    users = Users.query.order_by(Users.id).all()
+    return render_template('feedback.html', users=users)
 
 # 会話詳細画面（テンプレート: talkDetail.html）
 @app.route('/talk_detail', methods=['GET', 'POST'])
 def talk_detail():
-    return render_template('talkDetail.html')
+    users = Users.query.order_by(Users.id).all()
+    return render_template('talkDetail.html', users=users)
+
+# ログイン画面（テンプレート: login.html）
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+   if request.method == "POST":
+        username = request.form.get('username')
+        password = request.form.get('password')
+        # Userテーブルからusernameに一致するユーザを取得
+        user = Users.query.filter_by(username=username).first()
+        if check_password_hash(user.password, password):
+            login_user(user)
+            return redirect('after')
+        else:
+            # 入力したユーザー名のパスワードが間違っている場合
+            # return "<p>パスワードが間違っています。</p>"
+            return Response(status=404, response="ページが見つかりません。")
+   else:
+        return render_template('login.html')
+
+# 登録画面（テンプレート: new_person.html）
+@app.route('/new_person', methods=['GET', 'POST'])
+def new_person():
+    if request.method == "POST":
+        username = request.form.get('username')
+        password = request.form.get('password')
+        # Userのインスタンスを作成
+        user = Users(username=username, password=generate_password_hash(password, method='sha256'), email=username)
+        db.session.add(user)
+        db.session.commit()
+        return redirect('login')
+    else:
+        return render_template('new_person.html')
+
+@app.before_request
+def before_request():
+    # リクエストのたびにセッションの寿命を更新する
+    session.permanent = True
+    app.permanent_session_lifetime = timedelta(minutes=15)
+    session.modified = True
 
 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])

database.py

@@ -0,0 +1,3 @@
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()

init/createdatabase.sql

@@ -0,0 +1,14 @@
+USE app;
+
+CREATE TABLE users(
+    user_id INT PRIMARY KEY AUTO_INCREMENT,
+    username VARCHAR(255),
+    password VARCHAR(255),
+    
+);
+
+INSERT INTO users(username,password) VALUES('sample','sample');
+INSERT INTO users(username,password) VALUES('test','test');
+INSERT INTO users(username,password) VALUES('app','app');
+
+GRANT ALL ON app.* TO test;

requirements.txt

@@ -3,4 +3,9 @@ pyannote.audio==2.1.1
 numpy==1.23.5
 pydub==0.25.1
 matplotlib==3.6.3
-python-dotenv
+python-dotenv
+uwsgi
+flask-sqlalchemy
+PyMySQL
+flask-login
+

templates/index.html

@@ -67,12 +67,14 @@
       .chart {
         width: 300px;
         height: 300px;
-        margin-bottom: 50px;
+        margin-bottom: 20px; /* 円グラフとボタンの間隔を狭く */
+      }
+      .controls {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
-      /* 録音ボタンのスタイル */
       .record-button {
-        position: fixed;
-        bottom: 30px;
         width: 80px;
         height: 80px;
         background-color: transparent;
@@ -97,13 +99,10 @@
         height: 40px;
         border-radius: 10%;
       }
-      /* 結果ボタンのスタイル */
-      .result-buttons {
-        margin-top: 5px;
-        display: flex;
-        gap: 10px;
-      }
       .result-button {
+        margin-left: 10px;
+
+        margin-top: 20px;
         padding: 10px 20px;
         background-color: #4caf50;
         border: none;
@@ -111,7 +110,9 @@
         color: white;
         cursor: pointer;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-        transition: background-color 0.2s ease;
+      }
+      .result {
+        display: flex;
       }
       .result-button:hover {
         background-color: #388e3c;
@@ -141,8 +142,12 @@
 
     <!-- 結果ボタン -->
     <div class="result-buttons">
-      <button class="result-button" id="historyButton" onclick="showHistory()">会話履歴を表示</button>
-      <button class="result-button" id="feedbackButton" onclick="showResults()">フィードバック画面を表示</button>
+      <button class="result-button" id="historyButton" onclick="showHistory()">
+        会話履歴を表示
+      </button>
+      <button class="result-button" id="feedbackButton" onclick="showResults()">
+        フィードバック画面を表示
+      </button>
     </div>
 
     <script>
@@ -150,51 +155,55 @@
       let mediaRecorder;
       let audioChunks = [];
       let recordingInterval; // 通常モードでの10秒周期用
-      let baseTimeout;       // 基準音声モード用のタイマー
+      let baseTimeout; // 基準音声モード用のタイマー
       let count_voice = 0;
       let before_rate = 0;
 
       // Chart.js の初期化
-      const ctx = document.getElementById('speechChart').getContext('2d');
+      const ctx = document.getElementById("speechChart").getContext("2d");
       const speechChart = new Chart(ctx, {
-        type: 'doughnut',
+        type: "doughnut",
         data: {
-          labels: ['自分', '他の人'],
-          datasets: [{
-            data: [30, 70],
-            backgroundColor: ['#4caf50', '#757575'],
-          }],
+          labels: ["自分", "他の人"],
+          datasets: [
+            {
+              data: [30, 70],
+              backgroundColor: ["#4caf50", "#757575"],
+            },
+          ],
         },
         options: {
           responsive: true,
           plugins: {
             legend: {
               display: true,
-              position: 'bottom',
-              labels: { color: 'white' }
-            }
-          }
-        }
+              position: "bottom",
+              labels: { color: "white" },
+            },
+          },
+        },
       });
 
       // トグルの状態を取得する関数
       function isBaseVoiceMode() {
-        return document.getElementById('baseVoiceToggle').checked;
+        return document.getElementById("baseVoiceToggle").checked;
       }
 
       async function toggleRecording() {
-        const recordButton = document.getElementById('recordButton');
+        const recordButton = document.getElementById("recordButton");
 
         if (!isRecording) {
           // 録音開始
           isRecording = true;
-          recordButton.classList.add('recording');
+          recordButton.classList.add("recording");
           try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const stream = await navigator.mediaDevices.getUserMedia({
+              audio: true,
+            });
             mediaRecorder = new MediaRecorder(stream);
             audioChunks = [];
 
-            mediaRecorder.ondataavailable = event => {
+            mediaRecorder.ondataavailable = (event) => {
               if (event.data.size > 0) {
                 audioChunks.push(event.data);
               }
@@ -214,8 +223,8 @@
                   mediaRecorder.stop();
                   // 10秒経過しても録音ボタンがONなら強制的に停止＆トグルをオフにする
                   isRecording = false;
-                  recordButton.classList.remove('recording');
-                  document.getElementById('baseVoiceToggle').checked = false;
+                  recordButton.classList.remove("recording");
+                  document.getElementById("baseVoiceToggle").checked = false;
                 }
               }, 10000);
             } else {
@@ -227,14 +236,14 @@
               }, 10000);
             }
           } catch (error) {
-            console.error('マイクへのアクセスに失敗しました:', error);
+            console.error("マイクへのアクセスに失敗しました:", error);
             isRecording = false;
-            recordButton.classList.remove('recording');
+            recordButton.classList.remove("recording");
           }
         } else {
           // 手動停止
           isRecording = false;
-          recordButton.classList.remove('recording');
+          recordButton.classList.remove("recording");
           if (isBaseVoiceMode()) {
             clearTimeout(baseTimeout);
           } else {
@@ -249,71 +258,95 @@
       }
 
       function sendAudioChunks(chunks) {
-        const audioBlob = new Blob(chunks, { type: 'audio/wav' });
+        const audioBlob = new Blob(chunks, { type: "audio/wav" });
         const reader = new FileReader();
         reader.onloadend = () => {
-          const base64String = reader.result.split(',')[1]; // Base64エンコードされた音声データ
+          const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
           // エンドポイントの選択：基準音声モードなら '/upload_base_audio'
-          const endpoint = isBaseVoiceMode() ? '/upload_base_audio' : '/upload_audio';
+          const endpoint = isBaseVoiceMode()
+            ? "/upload_base_audio"
+            : "/upload_audio";
           fetch(endpoint, {
-            method: 'POST',
+            method: "POST",
             headers: {
-              'Content-Type': 'application/json',
+              "Content-Type": "application/json",
             },
             body: JSON.stringify({ audio_data: base64String }),
           })
-          .then(response => response.json())
-          .then(data => {
-            if (data.error) {
-              alert('エラー: ' + data.error);
-              console.error(data.details);
-            } else if (data.rate !== undefined && !isBaseVoiceMode()) {
-              // 通常モードの場合、解析結果をチャートに反映
-              if (count_voice === 0) {
-                speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
-                before_rate = data.rate;
-              } else if (count_voice === 1) {
-                let tmp_rate = (data.rate + before_rate) / 2;
-                speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-                before_rate = tmp_rate;
+            .then((response) => response.json())
+            .then((data) => {
+              if (data.error) {
+                alert("エラー: " + data.error);
+                console.error(data.details);
+              } else if (data.rate !== undefined && !isBaseVoiceMode()) {
+                // 通常モードの場合、解析結果をチャートに反映
+                if (count_voice === 0) {
+                  speechChart.data.datasets[0].data = [
+                    data.rate,
+                    100 - data.rate,
+                  ];
+                  before_rate = data.rate;
+                } else if (count_voice === 1) {
+                  let tmp_rate = (data.rate + before_rate) / 2;
+                  speechChart.data.datasets[0].data = [
+                    tmp_rate,
+                    100 - tmp_rate,
+                  ];
+                  before_rate = tmp_rate;
+                } else {
+                  let tmp_rate = (data.rate + before_rate * 2) / 3;
+                  speechChart.data.datasets[0].data = [
+                    tmp_rate,
+                    100 - tmp_rate,
+                  ];
+                  before_rate = tmp_rate;
+                }
+                count_voice++;
+                speechChart.update();
               } else {
-                let tmp_rate = (data.rate + before_rate * 2) / 3;
-                speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-                before_rate = tmp_rate;
+                // 基準音声モードまたは解析結果がない場合
+                if (isBaseVoiceMode()) {
+                  //alert('基準音声が保存されました。');
+                  // トグルをリセット
+                  document.getElementById("baseVoiceToggle").checked = false;
+                } else {
+                  //alert('音声がバックエンドに送信されました。');
+                }
               }
-              count_voice++;
-              speechChart.update();
-            } else {
-              // 基準音声モードまたは解析結果がない場合
-              if (isBaseVoiceMode()) {
-                //alert('基準音声が保存されました。');
-                // トグルをリセット
-                document.getElementById('baseVoiceToggle').checked = false;
-              } else {
-                //alert('音声がバックエンドに送信されました。');
+              // 通常モードの場合、録音が継続中なら次の録音を開始（自動連続録音）
+              if (
+                !isBaseVoiceMode() &&
+                isRecording &&
+                mediaRecorder &&
+                mediaRecorder.state === "inactive"
+              ) {
+                mediaRecorder.start();
               }
-            }
-            // 通常モードの場合、録音が継続中なら次の録音を開始（自動連続録音）
-            if (!isBaseVoiceMode() && isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
-              mediaRecorder.start();
-            }
-          })
-          .catch(error => {
-            console.error('エラー:', error);
-            if (!isBaseVoiceMode() && isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
-              mediaRecorder.start();
-            }
-          });
+            })
+            .catch((error) => {
+              console.error("エラー:", error);
+              if (
+                !isBaseVoiceMode() &&
+                isRecording &&
+                mediaRecorder &&
+                mediaRecorder.state === "inactive"
+              ) {
+                mediaRecorder.start();
+              }
+            });
         };
         reader.readAsDataURL(audioBlob);
       }
 
       function showHistory() {
-        alert('会話履歴を表示する機能は未実装です。');
+        // 会話履歴表示の画面があれば、そのページへ遷移する例
+        // window.location.href = 'history';
+        alert("会話履歴を表示する機能は未実装です。");
       }
 
       function showResults() {
-        window.location.href = 'feedback';
+        // フィードバック画面へ遷移
+        window.location.href = "feedback";
       }
     </script>
   </body>

templates/login.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ログイン画面</title>
+   <style>
+    @charset "UTF-8";
+body {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+  background-color: #f4f4f4;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+h2 {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+a {
+  text-decoration: none;
+  color: #000000cc;
+}
+a:hover {
+  text-decoration: underline;
+}
+.container {
+  max-width: 800px;
+
+  background-color: #fff;
+  padding: 20px 80px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#transcription {
+  white-space: pre-wrap;
+  padding: 10px;
+  background-color: #e9e9e9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+button {
+  margin: 5px;
+  padding: 10px 10px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+.history-button {
+  margin-top: 20px;
+
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+history-button:hover {
+  background-color: #0056b3;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+}
+.new-person {
+  text-align: center;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.record-button {
+  width: 80px;
+  height: 80px;
+  background-color: transparent;
+  border-radius: 50%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+}
+
+.record-icon {
+  width: 60px;
+  height: 60px;
+  background-color: #d32f2f;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.recording .record-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10%;
+}
+
+.record-p {
+  border: 2px dashed #0000008c;
+}
+
+.disabled {
+  background-color: gray;
+  cursor: not-allowed;
+}
+
+.record-icon.recording {
+  width: 40px;
+  height: 40px;
+  border-radius: 0;
+}
+
+.new-person-right-container {
+  padding-left: 20px;
+}
+
+.record-container {
+  display: flex;
+  justify-content: center;
+}
+
+   </style>
+    
+  </head>
+  <body>
+    <form method="POST">
+      <div class="container">
+        <h2>ログイン</h2>
+        <div>
+          <label for="">ユーザ名</label>
+          <input type="text" name="username" />
+          <br />
+          <br />
+          <label for="">パスワード</label>
+          <input type="password" name="password" />
+          <br />
+        </div>
+        <div class="flex">
+          <input
+            type="submit"
+            class="history-button"
+            id="loginButton"
+            onclick="showRecorder()"
+            value="ログイン"
+          />
+        </div>
+    </form>
+    <div class="new-person">
+        <p><a href="new_person.php" class="new-person">新規会員登録をする</a></p>
+    </div>
+    </div>
+   
+    
+    
+    <script>
+      // 会話データを表示
+      async function displayTranscription() {
+        const transcriptionElement = document.getElementById("transcription");
+
+        try {
+          // バックエンドからデータを取得（デモ用のURLを指定）
+          const response = await fetch("/api/transcription");
+          if (!response.ok) throw new Error("データ取得に失敗しました。");
+
+          const data = await response.json();
+
+          // 会話内容を整形して表示
+          const formattedText = data.conversations
+            .map((conv, index) => `【${conv.speaker}】 ${conv.text}`)
+            .join("\n");
+
+          transcriptionElement.textContent = formattedText;
+        } catch (error) {
+          transcriptionElement.textContent = `エラー: ${error.message}`;
+          console.error("データ取得エラー:", error);
+        }
+      }
+
+      // 初期化処理
+      displayTranscription();
+
+      //画面遷移
+      function showRecorder() {
+        // 録音画面へ遷移
+        window.location.href = "/index";
+      }
+      function showFeedback() {
+        // フィードバック画面へ遷移
+        window.location.href = "/feedback";
+      }
+    </script>
+  </body>
+</html>

templates/new_person.html

@@ -1,215 +1,344 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
-    <title>ユーザー登録画面</title>
-  </head>
-  <body>
-    <form method="POST">
-      <div class="container">
-        <h2>ユーザー登録</h2>
-        <div class="flex">
-          <div>
-            <label for="">ユーザー名</label>
-            <br />
-            <input
-              type="text"
-              id="username"
-              name="username"
-              placeholder="例：技育 太郎"
-              required
-              oninput="validateForm()"
-            />
-            <br />
-            <br />
-            <label for="">パスワード</label>
-            <br />
-            <input
-              type="password"
-              id="password"
-              name="password"
-              placeholder="半角数字8文字以上20文字以内"
-              maxlength="20"
-              required
-              oninput="validateForm()"
-            />
-            <br />
-            <br />
-            <label for=""> パスワード再入力</label>
-            <br />
-            <input
-              type="password"
-              id="repassword"
-              name="repassword"
-              placeholder="再入力してください"
-              maxlength="20"
-              required
-              oninput="validateForm()"
-            />
-            <p id="passwordError" class="error-message"></p>
-            <br />
-          </div>
-          <div class="new-person-right-container">
-            <label for="">
-              録音ボタンを押した後、10秒間声を録音してください</label
-            >
-            <br />
-            <p class="record-p">
-              例文：昔々、あるところにおばあさんとおじいさんがいました。<br />
-              おばあさんは川に洗濯に、おじいさんは山に芝刈りに行きました。
-            </p>
-            <div class="record-container">
-              <button
-                class="record-button"
-                id="recordButton"
-                onclick="toggleRecording()"
-              >
-                <div class="record-icon" id="recordIcon"></div>
-              </button>
-            </div>
-
-            <p id="countdownDisplay"></p>
-          </div>
-        </div>
-
-        <div class="flex">
-          <input
-            type="submit"
-            value="会員登録を行う"
-            name="submit"
-            id="submit"
-            class="history-button disabled"
-            disabled
-          />
-        </div>
-      </div>
-    </form>
-    <script>
-      let mediaRecorder;
-      let audioChunks = [];
-      let countdownTimer;
-      let isAudioRecorded = false;
-
-      async function toggleRecording() {
-        const recordButton = document.getElementById("recordButton");
-
-        const countdownDisplay = document.getElementById("countdownDisplay");
-
-        recordButton.disabled = true; // ボタンを無効化（連打防止）
-        countdownDisplay.textContent = "録音中…"; // 初期表示
-        isAudioRecorded = false;
-        recordIcon.classList.add("recording"); // アイコンを正方形に変更
-
-        try {
-          const stream = await navigator.mediaDevices.getUserMedia({
-            audio: true,
-          });
-          mediaRecorder = new MediaRecorder(stream);
-          audioChunks = [];
-
-          mediaRecorder.ondataavailable = (event) => {
-            if (event.data.size > 0) {
-              audioChunks.push(event.data);
-            }
-          };
-
-          mediaRecorder.onstop = () => {
-            sendAudioChunks([...audioChunks]); // 録音データをサーバーに送信
-            audioChunks = [];
-            recordButton.disabled = false; // ボタンを再度有効化
-            countdownDisplay.textContent = ""; // カウントダウンを消す
-            isAudioRecorded = true; // 録音完了
-            recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
-            validateForm(); // フォームの状態を更新
-          };
-
-          mediaRecorder.start();
-          startCountdown(10, countdownDisplay); // 10秒のカウントダウン開始
-
-          // 10秒後に録音を自動停止
-          setTimeout(() => {
-            if (mediaRecorder.state === "recording") {
-              mediaRecorder.stop();
-            }
-          }, 10000);
-        } catch (error) {
-          console.error("マイクのアクセスに失敗しました:", error);
-          recordButton.disabled = false; // ボタンを再度有効化
-          countdownDisplay.textContent = ""; // カウントダウンを消す
-          recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
-        }
-      }
-
-      function startCountdown(seconds, displayElement) {
-        let remaining = seconds;
-        displayElement.textContent = `録音終了まで: ${remaining}秒`;
-
-        countdownTimer = setInterval(() => {
-          remaining--;
-          displayElement.textContent = `録音終了まで: ${remaining}秒`;
-
-          if (remaining <= 0) {
-            clearInterval(countdownTimer); // カウントダウン終了
-          }
-        }, 1000);
-      }
-
-      function sendAudioChunks(chunks) {
-        const audioBlob = new Blob(chunks, { type: "audio/wav" });
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64String = reader.result.split(",")[1]; // Base64 に変換
-          fetch("/upload_audio", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ audio_data: base64String }),
-          })
-            .then((response) => response.json())
-            .then((data) => {
-              alert("音声がサーバーに送信されました。");
-            })
-            .catch((error) => {
-              console.error("送信エラー:", error);
-            });
-        };
-        reader.readAsDataURL(audioBlob);
-      }
-
-      // フォームの入力状態をチェック
-      function validateForm() {
-        const username = document.getElementById("username").value.trim();
-        const password = document.getElementById("password").value.trim();
-        const repassword = document.getElementById("repassword").value.trim();
-        const submitButton = document.getElementById("submit");
-        const passwordError = document.getElementById("passwordError");
-
-        if (password !== repassword) {
-          passwordError.textContent = "パスワードが一致しません。";
-          submitButton.classList.add("disabled");
-          submitButton.disabled = true;
-          return;
-        } else {
-          passwordError.textContent = "";
-        }
-
-        if (
-          username !== "" &&
-          password.length >= 8 &&
-          password.length <= 20 &&
-          password === repassword &&
-          isAudioRecorded
-        ) {
-          submitButton.classList.remove("disabled");
-          submitButton.disabled = false;
-        } else {
-          submitButton.classList.add("disabled");
-          submitButton.disabled = true;
-        }
-      }
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      @charset "UTF-8";
+      body {
+        font-family: Arial, sans-serif;
+        padding: 20px;
+        background-color: #f4f4f4;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      h2 {
+        margin-bottom: 20px;
+        text-align: center;
+      }
+
+      a {
+        text-decoration: none;
+        color: #000000cc;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .container {
+        max-width: 800px;
+
+        background-color: #fff;
+        padding: 20px 80px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      #transcription {
+        white-space: pre-wrap;
+        padding: 10px;
+        background-color: #e9e9e9;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        max-height: 400px;
+        overflow-y: auto;
+      }
+      button {
+        margin: 5px;
+        padding: 10px 10px;
+        border: none;
+        border-radius: 4px;
+        background-color: #007bff;
+        color: #fff;
+        cursor: pointer;
+      }
+      .history-button {
+        margin-top: 20px;
+
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      history-button:hover {
+        background-color: #0056b3;
+      }
+
+      .flex {
+        display: flex;
+        justify-content: center;
+      }
+      .new-person {
+        text-align: center;
+      }
+
+      .controls {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .record-button {
+        width: 80px;
+        height: 80px;
+        background-color: transparent;
+        border-radius: 50%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: all 0.2s ease;
+      }
+
+      .record-icon {
+        width: 60px;
+        height: 60px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+      }
+
+      .recording .record-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10%;
+      }
+
+      .record-p {
+        border: 2px dashed #0000008c;
+      }
+
+      .disabled {
+        background-color: gray;
+        cursor: not-allowed;
+      }
+
+      .record-icon.recording {
+        width: 40px;
+        height: 40px;
+        border-radius: 0;
+      }
+
+      .new-person-right-container {
+        padding-left: 20px;
+      }
+
+      .record-container {
+        display: flex;
+        justify-content: center;
+      }
+    </style>
+    <title>ユーザー登録画面</title>
+  </head>
+  <body>
+    <form method="POST">
+      <div class="container">
+        <h2>ユーザー登録</h2>
+        <div class="flex">
+          <div>
+            <label for="">ユーザー名</label>
+            <br />
+            <input
+              type="text"
+              id="username"
+              name="username"
+              placeholder="例：技育 太郎"
+              required
+              oninput="validateForm()"
+            />
+            <br />
+            <br />
+            <label for="">パスワード</label>
+            <br />
+            <input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="半角数字8文字以上20文字以内"
+              maxlength="20"
+              required
+              oninput="validateForm()"
+            />
+            <br />
+            <br />
+            <label for=""> パスワード再入力</label>
+            <br />
+            <input
+              type="password"
+              id="repassword"
+              name="repassword"
+              placeholder="再入力してください"
+              maxlength="20"
+              required
+              oninput="validateForm()"
+            />
+            <p id="passwordError" class="error-message"></p>
+            <br />
+          </div>
+          <div class="new-person-right-container">
+            <label for="">
+              録音ボタンを押した後、10秒間声を録音してください</label
+            >
+            <br />
+            <p class="record-p">
+              例文：昔々、あるところにおばあさんとおじいさんがいました。<br />
+              おばあさんは川に洗濯に、おじいさんは山に芝刈りに行きました。
+            </p>
+            <div class="record-container">
+              <button
+                class="record-button"
+                id="recordButton"
+                onclick="toggleRecording()"
+              >
+                <div class="record-icon" id="recordIcon"></div>
+              </button>
+            </div>
+
+            <p id="countdownDisplay"></p>
+          </div>
+        </div>
+
+        <div class="flex">
+          <input
+            type="submit"
+            value="会員登録を行う"
+            name="submit"
+            id="submit"
+            class="history-button disabled"
+            disabled
+          />
+        </div>
+      </div>
+    </form>
+    <script>
+      let mediaRecorder;
+      let audioChunks = [];
+      let countdownTimer;
+      let isAudioRecorded = false;
+
+      async function toggleRecording() {
+        const recordButton = document.getElementById("recordButton");
+
+        const countdownDisplay = document.getElementById("countdownDisplay");
+
+        recordButton.disabled = true; // ボタンを無効化（連打防止）
+        countdownDisplay.textContent = "録音中…"; // 初期表示
+        isAudioRecorded = false;
+        recordIcon.classList.add("recording"); // アイコンを正方形に変更
+
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+          });
+          mediaRecorder = new MediaRecorder(stream);
+          audioChunks = [];
+
+          mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+              audioChunks.push(event.data);
+            }
+          };
+
+          mediaRecorder.onstop = () => {
+            sendAudioChunks([...audioChunks]); // 録音データをサーバーに送信
+            audioChunks = [];
+            recordButton.disabled = false; // ボタンを再度有効化
+            countdownDisplay.textContent = ""; // カウントダウンを消す
+            isAudioRecorded = true; // 録音完了
+            recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
+            validateForm(); // フォームの状態を更新
+          };
+
+          mediaRecorder.start();
+          startCountdown(10, countdownDisplay); // 10秒のカウントダウン開始
+
+          // 10秒後に録音を自動停止
+          setTimeout(() => {
+            if (mediaRecorder.state === "recording") {
+              mediaRecorder.stop();
+            }
+          }, 10000);
+        } catch (error) {
+          console.error("マイクのアクセスに失敗しま��た:", error);
+          recordButton.disabled = false; // ボタンを再度有効化
+          countdownDisplay.textContent = ""; // カウントダウンを消す
+          recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
+        }
+      }
+
+      function startCountdown(seconds, displayElement) {
+        let remaining = seconds;
+        displayElement.textContent = `録音終了まで: ${remaining}秒`;
+
+        countdownTimer = setInterval(() => {
+          remaining--;
+          displayElement.textContent = `録音終了まで: ${remaining}秒`;
+
+          if (remaining <= 0) {
+            clearInterval(countdownTimer); // カウントダウン終了
+          }
+        }, 1000);
+      }
+
+      function sendAudioChunks(chunks) {
+        const audioBlob = new Blob(chunks, { type: "audio/wav" });
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64String = reader.result.split(",")[1]; // Base64 に変換
+          fetch("/upload_audio", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ audio_data: base64String }),
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              alert("音声がサーバーに送信されました。");
+            })
+            .catch((error) => {
+              console.error("送信エラー:", error);
+            });
+        };
+        reader.readAsDataURL(audioBlob);
+      }
+
+      // フォームの入力状態をチェック
+      function validateForm() {
+        const username = document.getElementById("username").value.trim();
+        const password = document.getElementById("password").value.trim();
+        const repassword = document.getElementById("repassword").value.trim();
+        const submitButton = document.getElementById("submit");
+        const passwordError = document.getElementById("passwordError");
+
+        if (password !== repassword) {
+          passwordError.textContent = "パスワードが一致しません。";
+          submitButton.classList.add("disabled");
+          submitButton.disabled = true;
+          return;
+        } else {
+          passwordError.textContent = "";
+        }
+
+        if (
+          username !== "" &&
+          password.length >= 8 &&
+          password.length <= 20 &&
+          password === repassword &&
+          isAudioRecorded
+        ) {
+          submitButton.classList.remove("disabled");
+          submitButton.disabled = false;
+        } else {
+          submitButton.classList.add("disabled");
+          submitButton.disabled = true;
+        }
+      }
+    </script>
+  </body>
+</html>

templates/resetting_password.html

@@ -36,28 +36,6 @@
     
     
     <script>
-      // 会話データを表示
-      async function displayTranscription() {
-        const transcriptionElement = document.getElementById("transcription");
-
-        try {
-          // バックエンドからデータを取得（デモ用のURLを指定）
-          const response = await fetch("/api/transcription");
-          if (!response.ok) throw new Error("データ取得に失敗しました。");
-
-          const data = await response.json();
-
-          // 会話内容を整形して表示
-          const formattedText = data.conversations
-            .map((conv, index) => `【${conv.speaker}】 ${conv.text}`)
-            .join("\n");
-
-          transcriptionElement.textContent = formattedText;
-        } catch (error) {
-          transcriptionElement.textContent = `エラー: ${error.message}`;
-          console.error("データ取得エラー:", error);
-        }
-      }
 
       // 初期化処理
       displayTranscription();

users.py

@@ -0,0 +1,17 @@
+
+from flask_login import UserMixin
+from database import db 
+
+class Users(UserMixin, db.Model):
+    '''
+    Users Table Model
+    '''
+    __tablename__ = 'users'
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(255), nullable=False, unique=True)
+    password = db.Column(db.String(255))
+
+    def __init__(self,username,password):
+        self.username = username
+        self.password = password
+