File size: 4,041 Bytes
2157d4f 8e40013 e831a1d 02f749e 2157d4f 43affd4 2018cf4 8e40013 2018cf4 ff30fe7 e831a1d 2157d4f 2018cf4 e831a1d 2018cf4 e831a1d b0f6bf5 43affd4 2018cf4 b0f6bf5 2018cf4 43affd4 2018cf4 43affd4 b0f6bf5 8e40013 e831a1d 8e40013 e831a1d 8e40013 baedf33 e831a1d dabd32e e831a1d dabd32e e831a1d dabd32e e831a1d 2157d4f eb63065 2157d4f 02f749e e831a1d 8e40013 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import Head from "next/head";
import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { client } from "@gradio/client";
import axios from "axios";
import React from "react";
export default function Home() {
const inputFileRef = React.createRef();
const [file,setFile] = useState('');
const [result,setResult] = useState('');
const [query,setQuery] = useState('');
const [collection,setCollection] = useState('');
const formData = new FormData();
const handleFileChange = (event:any) => {
// console.log(event.target.files[0])
setFile(event.target.files[0]);
// const inputFile:any = inputFileRef.current;
// const exampleFile = inputFile.files[0];
// formData.append("pdfFile", exampleFile);
// console.log(formData)
}
const SendFile = async() => {
console.log("File Recieved: ",file)
console.log("Query Recieved: ",query)
console.log("Collection Recieved: ",collection)
formData.append('query', query);
formData.append('pdf_file', file);
formData.append('collection_name', collection);
console.log("FORM",formData)
try{
// const url = 'https://teamtonic-herechatbackend.hf.space/--replicas/djdp8/';
// const data = {
// data: [query, formData, collection]
// };
// const response = await axios.post(url, data.data, {
// headers: {
// 'Content-Type': 'application/json'
// }
// })
const response = await axios.post('https://teamtonic-herechatbackend.hf.space/--replicas/djdp8/combined_interface', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
const responseData = response.data;
console.log(response)
}catch(error){
console.error('Error:', error);
}
}
return (
<>
<Head>
<title>Here.Chat</title>
<link rel="icon" href="/favicon.ico" />
<meta name="description" content="Semantic Search with Cohere 🗣️" />
</Head>
<div className="">
<div className=''>
<div className='flex justify-end m-10'>
<div className='bg-blue-500 text-sm rounded-xl text-white px-4 py-2'>
<Link href={'./Search'}>Search Document</Link>
</div>
</div>
<div className='flex flex-col gap-10 justify-center items-center pt-10 h-full mx-auto'>
<div className='flex flex-col'>
<h1 className='text-gray-400 text-5xl md:text-7xl font-bold'>Here <span className='text-blue-600 dark:text-blue-500'> .Chat</span></h1>
<h2 className="text-sm">Semantic Search your document in over 100 languages</h2>
</div>
<div className=''>
<div className="">
<div className="flex flex-col justify-center items-center gap-4">
<div className="flex justify-center gap-4">
<div>
<label htmlFor="" className="font-bold text-3xl">Enter Query</label>
<Input type='text' onChange={(e)=>setQuery(e.target.value)}/>
</div>
<div>
<label htmlFor="" className="font-bold text-3xl">Enter Document</label>
<Input type='file' onChange={handleFileChange}/>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">TXT, DOCX, PPTX, JPG, PNG, HTML or PDF</p>
</div>
<div>
<label htmlFor="" className="font-bold text-3xl">Collection</label>
<Input type='text' onChange={(e) => setCollection(e.target.value)}/>
</div>
</div>
<div>
<Button className='border-2 border-blue-500 bg-white text-blue-500 font-bold hover:text-white hover:bg-blue-500' disabled={!file} onClick={SendFile} >Submit</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
|