Spaces:

Mudassir939
/

Transcription_bot

Sleeping

App Files Files Community

Mudassir939 commited on Aug 27, 2024

Commit

ad02f33

verified ·

1 Parent(s): c1b42aa

Upload 4 files

Browse files

Files changed (4) hide show

gemini-api.js +72 -0
index.html +29 -19
main.js +48 -0
style.css +74 -28

gemini-api.js ADDED Viewed

	@@ -0,0 +1,72 @@

+/**
+ * Calls the given Gemini model with the given image and/or text
+ * parts, streaming output (as a generator function).
+ */
+export async function* streamGemini({
+    model = 'gemini-pro', // use 'gemini-pro' for text -> text
+    contents = [],
+  } = {}) {
+    // Send the prompt to the Python backend
+    // Call API defined in main.py
+    let response = await fetch("/api/generate", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ model, contents })
+    });
+    yield* streamResponseChunks(response);
+  }
+  /**
+   * A helper that streams text output chunks from a fetch() response.
+   */
+  async function* streamResponseChunks(response) {
+    let buffer = '';
+    const CHUNK_SEPARATOR = '\n\n';
+    let processBuffer = async function* (streamDone = false) {
+      while (true) {
+        let flush = false;
+        let chunkSeparatorIndex = buffer.indexOf(CHUNK_SEPARATOR);
+        if (streamDone && chunkSeparatorIndex < 0) {
+          flush = true;
+          chunkSeparatorIndex = buffer.length;
+        }
+        if (chunkSeparatorIndex < 0) {
+          break;
+        }
+        let chunk = buffer.substring(0, chunkSeparatorIndex);
+        buffer = buffer.substring(chunkSeparatorIndex + CHUNK_SEPARATOR.length);
+        chunk = chunk.replace(/^data:\s*/, '').trim();
+        if (!chunk) {
+          if (flush) break;
+          continue;
+        }
+        let { error, text } = JSON.parse(chunk);
+        if (error) {
+          console.error(error);
+          throw new Error(error?.message || JSON.stringify(error));
+        }
+        yield text;
+        if (flush) break;
+      }
+    };
+    const reader = response.body.getReader();
+    try {
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break;
+        buffer += new TextDecoder().decode(value);
+        console.log(new TextDecoder().decode(value));
+        yield* processBuffer();
+      }
+    } finally {
+      reader.releaseLock();
+    }
+    yield* processBuffer(true);
+  }

index.html CHANGED Viewed

@@ -1,19 +1,29 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Transcription_Bot</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <main class="container">
+    <h1>Transcription_Bot</h1>
+    <!-- Form for uploading audio file -->
+    <form class="form-container" id="transcription-form" enctype="multipart/form-data">
+      <div class="file-upload-box">
+        <label for="audio-file">Upload Audio File:</label>
+        <input type="file" id="audio-file" name="audio_file" accept="audio/*" class="input-field">
+      </div>
+      <button type="submit" class="submit-button">Go</button>
+    </form>
+    <p class="output" id="output">(Results will appear here)</p>
+  </main>
+  <script type="module" src="/main.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,48 @@

+import { streamGemini } from './gemini-api.js';
+let form = document.querySelector('form');
+let output = document.querySelector('.output');
+let audioFileInput = document.querySelector('input[name="audio_file"]');
+form.onsubmit = async (ev) => {
+  ev.preventDefault();
+  output.textContent = 'Processing...';
+  try {
+    // Log form data before sending
+    console.log('Preparing to send audio file:', audioFileInput.files[0]);
+    // Create a FormData object to hold the audio file
+    let formData = new FormData();
+    formData.append('audio_file', audioFileInput.files[0]);
+    // Send the audio file to the Flask backend for transcription and option selection
+    let response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData
+    });
+    // Log the response status
+    console.log('Response status:', response.status);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    let result = await response.json();
+    let selectedOption = result.selected_option;
+    // Log the response data
+    console.log('Received result:', result);
+    // Display the transcription and the selected option
+    output.innerHTML = `
+      <p>Transcription: ${result.transcription}</p>
+      <p>Correct Option: ${selectedOption}</p>
+    `;
+  } catch (e) {
+    console.error('Error occurred:', e);
+    output.innerHTML = '<hr>' + e;
+  }
+};

style.css CHANGED Viewed

@@ -1,28 +1,74 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Global Styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+  /* Container */
+  .container {
+    max-width: 600px;
+    width: 100%;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  /* Header */
+  h1 {
+    font-weight: 700;
+    color: #4a90e2;
+    margin-bottom: 20px;
+  }
+  /* Form Container */
+  .form-container {
+    margin-bottom: 20px;
+  }
+  /* Input Field */
+  .input-field {
+    width: calc(100% - 100px);
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    font-size: 16px;
+    margin-right: 10px;
+    box-sizing: border-box;
+  }
+  /* Submit Button */
+  .submit-button {
+    padding: 10px 20px;
+    border-radius: 4px;
+    border: none;
+    background-color: #4a90e2;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  .submit-button:hover {
+    background-color: #357ab7;
+  }
+  /* Output Paragraph */
+  .output {
+    font-size: 16px;
+    color: #666;
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }