We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
it's supposed to work out of the box right? Why isn't it working?
I changed the name to App.jsx
import React, { useState, useEffect } from 'react'; import axios from 'axios'; import './App.css'; function App() { const [file, setFile] = useState(null); const [fileName, setFileName] = useState(""); const [outputDir, setOutputDir] = useState(""); const [promptFileName, setPromptFileName] = useState(""); const [outputFile, setOutputFile] = useState(""); const [tokenLimit, setTokenLimit] = useState(800); const [openAiPrompt, setOpenAiPrompt] = useState(""); const [message, setMessage] = useState(""); useEffect(() => { if (fileName) { const fileBaseName = fileName.substring(0, fileName.lastIndexOf('.')); setOutputFile(`translated_${fileBaseName}.srt`); } }, [fileName]); const handleFileChange = (e) => { const uploadedFile = e.target.files[0]; if (uploadedFile) { setFile(uploadedFile); setFileName(uploadedFile.name); // Extract directory path and set output directory const directory = uploadedFile.webkitRelativePath.split('/').slice(0, -1).join('/'); const outputDirectory = directory ? `${directory}/chunks` : 'chunks'; setOutputDir(outputDirectory); } }; const handlePromptFileChange = (e) => { const promptFile = e.target.files[0]; if (promptFile) { setPromptFileName(promptFile.name); // Optionally, read the file content and set it to openAiPrompt const reader = new FileReader(); reader.onload = (event) => { setOpenAiPrompt(event.target.result); }; reader.readAsText(promptFile); } }; const handleOutputDirChange = (e) => { const userInput = e.target.value; if (userInput) { setOutputDir((prev) => prev.replace(/\/output$/, `/${userInput}`)); } }; const handleSubmit = async (e) => { e.preventDefault(); if (!file) { setMessage("Please upload a file."); return; } const formData = new FormData(); formData.append("file", file); try { const uploadResponse = await axios.post("http://localhost:8000/uploadfile/", formData); const fileLocation = uploadResponse.data.file_location; const request = { input_file: fileLocation, output_dir: outputDir, prompt_file: promptFileName, output_file: outputFile, token_limit: tokenLimit, openai_prompt: openAiPrompt }; const translationResponse = await axios.post("http://localhost:8000/translate/", request); setMessage(translationResponse.data.message); } catch (error) { setMessage(`An error occurred: ${error.response.data.message}`); } }; return ( <div className="App"> <header className="App-header"> <h1>OpenAI Translator App</h1> <form onSubmit={handleSubmit}> <div className="form-group"> <label>Upload SRT File:</label> <input type="file" onChange={handleFileChange} /> <input type="text" value={fileName} readOnly /> </div> <div className="form-group"> <label>Output Directory:</label> <input type="text" value={outputDir} onChange={handleOutputDirChange} /> </div> <div className="form-group"> <label>Prompt File Path:</label> <input type="file" onChange={handlePromptFileChange} /> <input type="text" value={promptFileName} readOnly /> </div> <div className="form-group"> <label>Token Limit:</label> <input type="number" value={tokenLimit} onChange={(e) => setTokenLimit(e.target.value)} /> </div> <div className="form-group"> <label>OpenAI Prompt:</label> <textarea value={openAiPrompt} onChange={(e) => setOpenAiPrompt(e.target.value)} /> </div> <div className="form-group"> <label>Output File Path:</label> <input type="text" value={outputFile} readOnly /> </div> <button type="submit">Translate</button> </form> {message && <p>{message}</p>} </header> </div> ); } export default App;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
it's supposed to work out of the box right? Why isn't it working?
I changed the name to App.jsx
The text was updated successfully, but these errors were encountered: