ログイン機能搭載

app.py

@@ -1,16 +1,22 @@
-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
 import os
 import shutil
 import numpy as np
 import string
 import random
-from datetime import datetime
+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 = os.environ.get("HF")
+hf_token = "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"
 if hf_token is None:
     raise ValueError("HUGGINGFACE_HUB_TOKEN が設定されていません。")
 
@@ -22,6 +28,25 @@ os.makedirs(cache_dir, exist_ok=True)
 model = Model.from_pretrained("pyannote/embedding", use_auth_token=hf_token, cache_dir=cache_dir)
 inference = Inference(model)
 
+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)
@@ -79,23 +104,75 @@ def generate_filename(random_length):
     filename = f"{current_time}_{random_string}.wav"
     return filename
 
-app = Flask(__name__)
+
 
 # トップページ（テンプレート: 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,3 +3,7 @@ pyannote.audio==2.1.1
 numpy==1.23.5
 pydub==0.25.1
 matplotlib==3.6.3
+uwsgi
+flask-sqlalchemy
+PyMySQL
+flask-login

templates/login.html

@@ -4,7 +4,137 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ログイン画面</title>
-    <link rel="stylesheet" href="style.css">
+   <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>

templates/new_person.html

@@ -3,7 +3,136 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
+    <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>

templates/resetting_password.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>パスワード再設定画面</title>
+    <link rel="stylesheet" href="style.css">
+    
+  </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>
+   
+    
+    
+    <script>
+
+      // 初期化処理
+      displayTranscription();
+
+      //画面遷移
+      function showRecorder() {
+        // 録音画面へ遷移
+        window.location.href = "/index";
+      }
+      function showFeedback() {
+        // フィードバック画面へ遷移
+        window.location.href = "/feedback";
+      }
+    </script>
+  </body>
+</html>

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
+