Skip to content

Commit

Permalink
final update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akshatchaube01
Akshatchaube01 committed Jul 26, 2024
1 parent a1db0f3 commit 53a5558
Show file tree
Hide file tree
Showing 8 changed files with 314 additions and 58 deletions.
1 change: 1 addition & 0 deletions .env
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_API_KEY='sk-proj-axckbga92Xzt6DpWIIMBT3BlbkFJkZNo1QegEYwwd45bUcNe'
193 changes: 153 additions & 40 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,180 @@
"use client";
import "regenerator-runtime/runtime";
import Image from "next/image";
import { IconVolume,IconFileUpload } from '@tabler/icons-react';
import React, { useState, ChangeEvent } from "react";
import {
IconCopy,
IconStar,
IconThumbDown,
IconThumbUp,
IconVolume,
} from "@tabler/icons-react";
import SpeechRecognitionComponent from "@/components/Speech Recognition/SpeechRecognition";
import TextArea from "@/components/Inputs/TextArea";
import FileUpload from "@/components/Inputs/FileUpload";
import LinkPaste from "@/components/Inputs/LinkPaste";
import LanguageSelector from "@/components/Inputs/LanguageSelector";
import useTranslate from "@/hooks/useTranslate";
import { rtfToText } from "@/utils/rtfToText";

import SvgDecorations from "@/components/SvgDecorations";
import CategoryLinks from "@/components/categoryLinks";

import React, {useState,ChangeEvent} from "react";
import TextArea from '@/components/Inputs/TextArea';
import SpeechRecognitionComponent from '@/components/Speech Recognition/SpeechRecognition';
const Home: React.FC = () => {
const [sourceText, setSourceText] = useState<string>("");
const [copied, setCopied] = useState<boolean>(false);
const [favorite, setFavorite] = useState<boolean>(false);
const [languages] = useState<string[]>([
"English",
"Spanish",
"French",
"German",
"Chinese",
]);
const [selectedLanguage, setSelectedLanguage] = useState<string>("Spanish");

export default function Home() {
const targetText = useTranslate(sourceText, selectedLanguage);

const [sourceText,setSourceText]=useState<string>("");
const handleAudioPlayback = (text:string) =>{
const utterance=new SpeechSynthesisUtterance(text);
const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
const rtfContent = reader.result as string;
const text = rtfToText(rtfContent);
setSourceText(text);
};
reader.readAsText(file);
}
};

const handleLinkPaste = async (e: ChangeEvent<HTMLInputElement>) => {
const link = e.target.value;
try {
const response = await fetch(link);
const data = await response.text();
setSourceText(data);
} catch (error) {
console.error("Error fetching link content:", error);
}
};

const handleCopyToClipboard = () => {
navigator.clipboard.writeText(targetText);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};

const handleLike = () => {
// Implement like logic
};

const handleDislike = () => {
// Implement dislike logic
};

const handleFavorite = () => {
setFavorite(!favorite);
if (!favorite) {
localStorage.setItem("favoriteTranslation", targetText);
} else {
localStorage.removeItem("favoriteTranslation");
}
};

const handleAudioPlayback = (text: string) => {
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
};
return <div>

return (
<div className="h-[50rem] w-full dark:bg-black bg-white dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>

<div className="relative overflow-hidden h-screen">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 py-10 sm:py-24">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
<div className="text-center">
<h1
className="text-4xl sm:text-6xl font-bold text-neutral-200"
>Chit<span className="text-[#f87315]">
Chat</span></h1>
<p className="mt-3 text-neutral-400">
ChitChat: Bridging voices , connecting worlds
</p>

<div className="mt-7 sm:mt-12 max-auto max-w-3xl relative">
<div className="grid gap-4 md:grid-cols-4-grid-cols-1">
<div className="relative z-10 flex flex-col space-x-3 border rounded-lg shadow-lg bg-neutral-900 border-neutral-700 shadow-gray-900/20">
<h1 className="text-4xl sm:text-6xl font-bold text-neutral-200">
Chit<span className="text-[#f87315]">Chat</span>
</h1>

<p className="mt-3 text-neutral-400">
ChitChat: Bridging Voices, Connecting Worlds.
</p>

<div className="mt-7 sm:mt-12 mx-auto max-w-3xl relative">
<div className="grid gap-4 md:grid-cols-2 grid-cols-1">
<div className="relative z-10 flex flex-col space-x-3 p-3 border rounded-lg shadow-lg bg-neutral-900 border-neutral-700 shadow-gray-900/20">
<TextArea
id="source-language"
value={sourceText}
onChange={(e:ChangeEvent<HTMLTextAreaElement>)=>(
setSourceText(e.target.value)
)}
placeholder="Source Language"
id="source-language"
value={sourceText}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
setSourceText(e.target.value)
}
placeholder="Source Language"
/>
<div className="flex flex-row justify-between w-full">
<span className="cursor-pointer flex space-x-2 flex-row">
<SpeechRecognitionComponent
setSourceText={setSourceText}
<SpeechRecognitionComponent
setSourceText={setSourceText}
/>
<IconVolume
size={22}
onClick={() => handleAudioPlayback(sourceText)}
<IconVolume
size={22}
onClick={() => handleAudioPlayback(sourceText)}
/>
{/* <IconFileUpload
size={22}
onClick={()=> handleFileUpload()}
/> */}
<FileUpload handleFileUpload={handleFileUpload} />
<LinkPaste handleLinkPaste={handleLinkPaste} />
</span>
<span className="text-sm pr-4">
{sourceText.length} / 2000
</span>
</div>
</div>

<div className="relative z-10 flex flex-col space-x-3 p-3 border rounded-lg shadow-lg bg-neutral-900 border-neutral-700 shadow-gray-900/20">
<TextArea
id="target-language"
value={targetText}
onChange={() => {}}
placeholder="Target Language"
/>
<div className="flex flex-row justify-between w-full">
<span className="cursor-pointer flex items-center space-x-2 flex-row">
<LanguageSelector
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
languages={languages}
/>
<IconVolume
size={22}
onClick={() => handleAudioPlayback(targetText)}
/>
</span>
<div className="flex flex-row items-center space-x-2 pr-4 cursor-pointer">
<IconCopy size={22} onClick={handleCopyToClipboard} />
{copied && (
<span className="text-xs text-green-500">Copied!</span>
)}
<IconThumbUp size={22} onClick={handleLike} />
<IconThumbDown size={22} onClick={handleDislike} />
<IconStar
size={22}
onClick={handleFavorite}
className={favorite ? "text-yellow-500" : ""}
/>
</div>
</div>
</div>
</div>

<SvgDecorations />
</div>

<CategoryLinks />
</div>
</div>
</div>
</div>
</div>
}
);
};

export default Home;
19 changes: 13 additions & 6 deletions src/components/Inputs/FileUpload.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React from "react";
import {IconPaperclip} from "@tabler/icons-react";
import { IconPaperclip } from "@tabler/icons-react";

const FileUpload = ({handleFileUpload}) =>{
const FileUpload = ({ handleFileUpload }) => {
return (
<label htmlFor="file-upload" className="cursor-pointer">
<IconPaperclip size={22}/>
<input id="file-upload" type="file" onChange={handleFileUpload} className="hidden" />
<IconPaperclip size={22} />
<input
id="file-upload"
type="file"
onChange={handleFileUpload}
className="hidden"
/>
</label>
}
);
};

export default FileUpload;
export default FileUpload;
8 changes: 5 additions & 3 deletions src/components/Inputs/LanguageSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,23 @@ import React from "react";
import { IconLanguage } from "@tabler/icons-react";

const LanguageSelector = ({selectedLanguage, setSelectedLanguage,languages})=>{
return(
<span className="cursor-pointer rounded-full space-x-1 pl-2 bg-black flex items-center flex-row">
<IconLanguage size={20}/>
<select
value={selectedLanguage}
onChange={(e)=> setSelectedLanguage(e.target.value)}
className="bg-black flex flex-row rounded-full py-1 text-white"
>
{language.map((language)=>{
<option key={language} value={language}>
{language}
{languages.map((languages)=>{
<option key={languages} value={languages}>
{languages}
</option>
})}
</select>

</span>
)
}


Expand Down
16 changes: 10 additions & 6 deletions src/components/Inputs/LinkPaste.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import React from "react";
import {IconLink} from "tabler/icons-react";
import { IconLink } from "@tabler/icons-react";

const LinkPaste = ({handleLinkPaste}) =>{
const LinkPaste = ({ handleLinkPaste }) => {
return (
<label htmlFor="link-input" className="cursor-pointer">
<IconLink size={21}/>
<input type="text" id="link-input"
<IconLink size={21} />
<input
type="text"
id="link-input"
className="hidden"
onChange={handleLinkPaste}
/>
/>
</label>
}
);
};

export default LinkPaste;
56 changes: 56 additions & 0 deletions src/components/SvgDecorations.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from "react";

const SvgDecorations: React.FC = () => {
return (
<>
<div className="hidden z-[200] md:block absolute top-0 end-0 -translate-y-12 translate-x-20">
<svg
className="w-16 h-auto text-orange-500"
width="121"
height="135"
viewBox="0 0 121 135"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
stroke="currentColor"
strokeWidth="10"
strokeLinecap="round"
/>
<path
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
stroke="currentColor"
strokeWidth="10"
strokeLinecap="round"
/>
<path
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
stroke="currentColor"
strokeWidth="10"
strokeLinecap="round"
/>
</svg>
</div>
<div className="hidden md:block absolute bottom-0 start-0 translate-y-10 -translate-x-32">
<svg
className="w-40 h-auto text-cyan-500"
width="347"
height="188"
viewBox="0 0 347 188"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 82.4591C54.7956 92.8751 30.9771 162.782 68.2065 181.385C112.642 203.59 127.943 78.57 122.161 25.5053C120.504 2.2376 93.4028 -8.11128 89.7468 25.5053C85.8633 61.2125 130.186 199.678 180.982 146.248L214.898 107.02C224.322 95.4118 242.9 79.2851 258.6 107.02C274.299 134.754 299.315 125.589 309.861 117.539L343 93.4426"
stroke="currentColor"
strokeWidth="7"
strokeLinecap="round"
/>
</svg>
</div>
</>
);
};

export default SvgDecorations;
Loading

0 comments on commit 53a5558

Please sign in to comment.