small fix with bugs
This commit is contained in:
@@ -2,10 +2,20 @@
|
|||||||
|
|
||||||
import { Hero } from "@/components/hero";
|
import { Hero } from "@/components/hero";
|
||||||
|
|
||||||
|
import SignupPage from './signup/page'
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
<div className="items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
|
||||||
|
<h1 style={{ fontSize: 64, marginBottom: 20 }}>Welcome to Hoya</h1>
|
||||||
|
<SignupPage />
|
||||||
|
<Link href="/transcribe">
|
||||||
|
<button>Go to Transcribe Page</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
56
src/app/(web)/transcribe/page.tsx
Normal file
56
src/app/(web)/transcribe/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const AudioTranscriber: React.FC = () => {
|
||||||
|
const [file, setFile] = useState<File | null>(null);
|
||||||
|
const [transcription, setTranscription] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (event.target.files && event.target.files.length > 0) {
|
||||||
|
setFile(event.target.files[0]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTranscription = async () => {
|
||||||
|
if (!file) return alert("Please select an audio file to transcribe!");
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await axios.post("http://localhost:8000/transcribe", formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setTranscription(response.data.transcription);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error transcribing audio:", error);
|
||||||
|
alert("Failed to transcribe audio. Please try again.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Audio Transcription</h1>
|
||||||
|
<input type="file" accept="audio/*" onChange={handleFileChange} />
|
||||||
|
<button onClick={handleTranscription} disabled={loading}>
|
||||||
|
{loading ? "Transcribing..." : "Transcribe"}
|
||||||
|
</button>
|
||||||
|
{transcription && (
|
||||||
|
<div>
|
||||||
|
<h2>Transcription:</h2>
|
||||||
|
<p>{transcription}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AudioTranscriber;
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import RootLayout from './layout'
|
|
||||||
import SignupPage from './signup/page'
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<RootLayout>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
|
|
||||||
<h1 style={{ fontSize: 64, marginBottom: 20 }}>Welcome to Hoya</h1>
|
|
||||||
<SignupPage />
|
|
||||||
<Link href="/transcribe">
|
|
||||||
<button>Go to Transcribe Page</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
const AudioTranscriber: React.FC = () => {
|
|
||||||
const [file, setFile] = useState<File | null>(null);
|
|
||||||
const [transcription, setTranscription] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.files && event.target.files.length > 0) {
|
|
||||||
setFile(event.target.files[0]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTranscription = async () => {
|
|
||||||
if (!file) return alert("Please select an audio file to transcribe!");
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("file", file);
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await axios.post("http://localhost:8000/transcribe", formData, {
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "multipart/form-data",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
setTranscription(response.data.transcription);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error transcribing audio:", error);
|
|
||||||
alert("Failed to transcribe audio. Please try again.");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>Audio Transcription</h1>
|
|
||||||
<input type="file" accept="audio/*" onChange={handleFileChange} />
|
|
||||||
<button onClick={handleTranscription} disabled={loading}>
|
|
||||||
{loading ? "Transcribing..." : "Transcribe"}
|
|
||||||
</button>
|
|
||||||
{transcription && (
|
|
||||||
<div>
|
|
||||||
<h2>Transcription:</h2>
|
|
||||||
<p>{transcription}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AudioTranscriber;
|
|
||||||
Reference in New Issue
Block a user