Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

buletomato25 commited on Mar 23

Commit

96e3aa5

1 Parent(s): 827df36

pull0323

Browse files

Files changed (3) hide show

app.py +16 -0
static/login.js +41 -0
templates/login.html +156 -0

app.py CHANGED Viewed

@@ -192,6 +192,22 @@ def reset():
     users = []
     return jsonify({"status": "success", "message": "Users reset"}), 200
 @app.route('/upload_base_audio', methods=['POST'])
 def upload_base_audio():

     users = []
     return jsonify({"status": "success", "message": "Users reset"}), 200
+@app.route('/login', methods=['POST', 'GET'])
+def login():
+    global users#グローバル変数を編集できるようにする
+    try:
+        data = request.get_json()
+        name = data['name']  # 名前を取得
+        if name in users:
+            print("名前はリストに存在します。")
+            index()
+        else:
+            print("名前はリストに存在しません。")
+    except Exception as e:
+        print("Error in /upload_base_audio:", str(e))
+        return jsonify({"error": "サーバーエラー", "details": str(e)}), 500
 @app.route('/upload_base_audio', methods=['POST'])
 def upload_base_audio():

static/login.js ADDED Viewed

	@@ -0,0 +1,41 @@

+let mediaRecorder;
+let audioChunks = [];
+let userCount = 0; // 追加されたメンバー数を保持
+let isRecording = false; // 録音中かどうかを判定するフラグ
+let currentRecordingButton = null; // 現在録音中のボタンを保持
+let userNames = [];
+document.getElementById("login-btn").addEventListener("click", function () {
+  const nameInput = document.querySelector('#people-list input[name="name"]');
+  const name = nameInput ? nameInput.value.trim() : "";
+  if (!name) {
+    alert("名前を入力してください");
+    return;
+  }
+  fetch("/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ name: name }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.error) {
+        alert("エラー: " + data.error);
+        console.error(data.details);
+      } else {
+        console.log("ログイン成功:", data);
+        // ここでUIの更新や次のアクションを追加できます
+      }
+    })
+    .catch((error) => {
+      console.error("通信エラー:", error);
+      alert("ログイン中にエラーが発生しました");
+    });
+});
+function Register() {
+  window.location.href = "userregister";
+}

templates/login.html ADDED Viewed

	@@ -0,0 +1,156 @@

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ユーザー音声登録</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      @keyframes pulse-scale {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+      .animate-pulse-scale {
+        animation: pulse-scale 1s infinite;
+      }
+      /* Record Button Styles */
+      .record-button {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 2px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: all 0.3s ease;
+      }
+      .record-icon {
+        width: 35px;
+        height: 35px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      .record-button.recording .record-icon {
+        background-color: #f44336; /* 録音中は赤色 */
+        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
+      }
+      .recording .record-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+      }
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+      }
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
+      }
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      }
+      /* Buttons */
+      .action-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        width: 100%;
+      }
+      .action-button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+      .back-button {
+        background-color: #607d8b; /* 落ち着いたグレー */
+        color: white;
+      }
+      .add-button {
+        background-color: #4caf50; /* 落ち着いた緑色 */
+        color: white;
+      }
+      /* Disabled State */
+      .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .main-content {
+          padding: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">ログイン</div>
+      <!-- HTML -->
+      <div id="people-list" class="space-y-4">
+        <input
+          type="text"
+          name="name"
+          placeholder="名前を入力"
+          value="${userName}"
+          class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
+        />
+      </div>
+      <!-- Add Button -->
+      <button id="login-btn" class="action-button add-button">
+        <i class="fas fa-user-plus"></i> ログイン
+      </button>
+      <!-- Back Button -->
+      <button
+        id="backButton"
+        onclick="Register()"
+        class="action-button back-button"
+      >
+        新規録音
+      </button>
+    </div>
+    <script src="{{ url_for('static', filename='login.js') }}"></script>
+  </body>
+</html>