├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── StyledEditText.css ├── api.js ├── body.js ├── header.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── test.js /README.md: -------------------------------------------------------------------------------- 1 | # 🤖 ChatGPT-2 2 | 3 | Welcome to this repository showcasing the power of ChatGPT-2! In this project, we utilize the API access from Hugging Face to seamlessly integrate ChatGPT-2 into a user-friendly interface. With officially supported UI elements, users can easily interact with ChatGPT-2 in a visually appealing environment. 🎨💬 4 | 5 | # 🔗 Check It Out 6 | 7 | Click here to chat with ChatGPT-2! 8 | 9 | # 🛠️ Tools Used 10 | 11 | The website is built using: 12 | 13 | 1. ⚛️ React.js 14 | 15 | 16 | 2. 🔑 A limited free API token from Hugging Face 17 | 18 | 19 | 20 | # 🚀 Installation/Usage 21 | 22 | To get started: 23 | 24 | 1. Clone the repository: git clone https://github.com/Yonatankinfe/ChatGPT2 25 | 26 | 27 | 2. Navigate to the project directory: cd ChatGPT2 28 | 29 | 30 | 3. Install dependencies: 31 | npm install 32 | 33 | 34 | 4. Run the project: npm start or npm run start 35 | 36 | 37 | 38 | # 🤝 Contribution 39 | 40 | Contributions are welcome! 🛠️ Feel free to open a pull request. 41 | 42 | # 👀 This is What it Looks Like 43 | 44 | Here are some examples of the project in action: 45 | 46 | # 🖼️ Images 47 | ![Screenshot 2024-03-01 211514](https://github.com/Yonatankinfe/ChatGPT2/assets/158090444/65c5236f-3b6e-4260-88c4-704b6d4ca5f2) 48 | ![Screenshot 2024-03-01 211630](https://github.com/Yonatankinfe/ChatGPT2/assets/158090444/f7ae56f1-2caa-45f0-87dc-c23a47af7ecf) 49 | # 🎥 Video 50 | https://github.com/Yonatankinfe/ChatGPT2/assets/158090444/81747a62-0dfa-429e-a609-57b06bb9de87 51 | # ⚠️ Warning 52 | 53 | NOTE: 🚨 Currently, the ChatGPT-2 API is not working, so please replace the default API. 🔄 You can get a new API from Hugging Face! 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chatgpt2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yonatankinfe/ChatGPT2/0afb23cb407f0b30d4567680d36575c2c5bd33b2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ChatGPT2.0 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yonatankinfe/ChatGPT2/0afb23cb407f0b30d4567680d36575c2c5bd33b2/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yonatankinfe/ChatGPT2/0afb23cb407f0b30d4567680d36575c2c5bd33b2/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import { useState } from 'react'; 3 | import Body from './body'; 4 | import StyledEditText from './test'; 5 | import query from './api'; // Import the query function 6 | 7 | function App() { 8 | const [userTexts, setUserTexts] = useState([]); 9 | const handleSubmission = async (responseText, userInput) => { // Add userInput as an argument 10 | setUserTexts((prevUserTexts) => [...prevUserTexts, { user: userInput, assistant: responseText }]); 11 | }; 12 | 13 | return ( 14 |
15 | {/* Correct the prop name to texts */} 16 | 17 |
18 | ); 19 | } 20 | 21 | export default App; 22 | 23 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/StyledEditText.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | background: linear-gradient(to right, #000000, #434343); 4 | } 5 | .styled-edit-text { 6 | background: black; 7 | color: white; 8 | padding: 10px; 9 | border: 4px solid gold; 10 | border-radius: 25px; /* Adjust for desired curve */ 11 | outline: none; 12 | height: 40px; 13 | margin-left: 400px; 14 | width: 500px; /* Remove default focus outline */ 15 | font-size: 16px; 16 | } 17 | .contaner{ 18 | flex-direction: row; 19 | display: flex; 20 | justify-content: center; 21 | } 22 | 23 | .sendbutton{ 24 | margin-top: 7px; 25 | margin-left: 30px; 26 | flex-direction: row; 27 | color:black; 28 | background: linear-gradient(to right, gold,rgb(138, 109, 34)); 29 | border-radius: 15px; 30 | cursor: pointer; 31 | transition: background-color 0.3s ease; 32 | border: gold; 33 | padding-top: 7px; 34 | padding-bottom: 7px; 35 | padding-left: 10px; 36 | height: 50px; 37 | width: 110px; 38 | text-align: center; 39 | font-style: bold; 40 | font-size: 22px; 41 | } 42 | .sendbutton:hover{ 43 | border: none; 44 | padding-top: 7px; 45 | padding-left: 12px; 46 | color:gainsboro; 47 | background: darkgoldenrod; 48 | border-radius: none; 49 | } 50 | .title{ 51 | color: gold; 52 | font-size: 30px; 53 | font-style: bold; 54 | font-family: 'Courier New', Courier, monospace; 55 | } 56 | .header{ 57 | margin-left: 34%; 58 | margin-top: 50px; 59 | margin-bottom: 20px; 60 | 61 | } 62 | @media (max-width: 768px) { 63 | .title{ 64 | margin-left: auto; 65 | margin-right: auto; 66 | } 67 | .sendbutton{ 68 | margin-left: 20px; 69 | margin-right: 20px; 70 | } 71 | .styled-edit-text{ 72 | margin-left: 20px; 73 | 74 | } 75 | 76 | 77 | } 78 | 79 | @media (max-width: 400px) { 80 | .title { 81 | margin-left: auto; 82 | margin-right: auto; 83 | } 84 | } 85 | .usertext{ 86 | background: goldenrod; 87 | color: white; 88 | } 89 | -------------------------------------------------------------------------------- /src/api.js: -------------------------------------------------------------------------------- 1 | const query = async (data) => { 2 | const response = await fetch("https://api-inference.huggingface.co/models/gpt2", { 3 | headers: { Authorization: "INSERT YOUR OWN API KEY" }, 4 | method: "POST", 5 | body: JSON.stringify({ 6 | inputs: data.inputs, 7 | options: { 8 | wait_for_model: true, 9 | max_length: 1000, 10 | temperature: 0.7, 11 | top_p: 0.95, 12 | num_return_sequences: 1, 13 | }, 14 | }), 15 | }); 16 | 17 | const result = await response.json(); 18 | return result; 19 | }; 20 | 21 | export default query; 22 | -------------------------------------------------------------------------------- /src/body.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | import './index.css'; 3 | 4 | function Body({ texts }) { 5 | return ( 6 |
7 | {texts.map(({ user, assistant }, index) => ( 8 | <> 9 |
10 | {user} 11 |
12 |
13 | {assistant} 14 |
15 | 16 | ))} 17 |
18 | ); 19 | } 20 | 21 | export default Body; -------------------------------------------------------------------------------- /src/header.js: -------------------------------------------------------------------------------- 1 | import './StyledEditText.css'; 2 | 3 | const header = () => { 4 | return ( 5 |
6 |
7 |

ChatGPT 2.0

8 |
9 |
10 | ); 11 | } 12 | export default header; 13 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | .par{ 15 | color: darkgray; 16 | font-size: medium; 17 | text-align: center; 18 | } 19 | .card { 20 | display: flex; 21 | flex-direction: column; 22 | width: 620px; 23 | height: 420px; 24 | border-radius: 15px; 25 | border:4px solid gold ; 26 | box-shadow: 4px 4px 8px goldenrod(137, 101, 9); 27 | padding: 20px; 28 | margin: 20px; 29 | margin-left: 410px; 30 | margin-top: 30px; 31 | display: flex; 32 | align-items: flex-start; 33 | color: white; 34 | font-family: Arial, sans-serif; 35 | font-size: 20px; 36 | text-align: center; 37 | } 38 | @media (max-width: 768px) { 39 | .card { 40 | height: 600px; 41 | width: 80%; 42 | margin-left: auto; 43 | margin-right: auto; 44 | } 45 | } 46 | 47 | @media (max-width: 400px) { 48 | .card { 49 | height: 395px; 50 | width: 80%; 51 | } 52 | } 53 | .userText{ 54 | color:black; 55 | display: flex; 56 | flex-direction: column; 57 | background: linear-gradient(to right, gold,goldenrod,rgb(161, 119, 13));; 58 | font-style: bold; 59 | padding-top: 17px; 60 | padding-bottom: 17px; 61 | max-width: calc(100% - 20px); /* Limit width to the card width minus padding */ 62 | padding-left: 20px; 63 | margin-top: 8px; 64 | padding-right: 20px; 65 | border-radius: 20px ; 66 | text-overflow: ellipsis; /* Show ellipsis (...) for text overflow */ 67 | align-self:flex-start; 68 | margin-left:auto; 69 | } 70 | .assistantText { 71 | color: black; 72 | display: flex; 73 | flex-direction: column; 74 | background: linear-gradient(to right, lightblue, lightskyblue, lightblue); 75 | font-style: bold; 76 | padding-top: 17px; 77 | padding-bottom: 17px; 78 | max-width: calc(100% - 20px); 79 | padding-left: 20px; 80 | margin-top: 8px; 81 | padding-right: 20px; 82 | border-radius: 20px; 83 | text-overflow: ellipsis; 84 | align-self: flex-start; 85 | margin-left: auto; 86 | } 87 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import Header from './header'; 6 | import reportWebVitals from './reportWebVitals'; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 |
13 | 14 |
15 |

This webiste is an open source project for demonstrating chatgpt2.0 you can get the all the info and more at this link 16 | Click here

17 |
18 | 19 | ); 20 | 21 | 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/test.js: -------------------------------------------------------------------------------- 1 | // StyledEditText.js 2 | import './StyledEditText.css'; 3 | import React, { useState } from 'react'; 4 | import query from './api'; // Import the query function 5 | 6 | function StyledEditText({ onSubmit }) { 7 | const [userInput, setUserInput] = useState(""); 8 | 9 | const handleInputChange = (event) => { 10 | setUserInput(event.target.value); 11 | }; 12 | 13 | const handleSubmit = async () => { 14 | const data = { 15 | inputs: userInput, 16 | }; 17 | 18 | try { 19 | const result = await query(data); 20 | onSubmit(result[0].generated_text, userInput); // Pass userInput as an argument 21 | setUserInput(""); 22 | } catch (error) { 23 | console.error("Error:", error); 24 | } 25 | }; 26 | 27 | return ( 28 |
29 |
30 | 32 | 33 |
34 |
35 | ); 36 | } 37 | 38 | export default StyledEditText; 39 | --------------------------------------------------------------------------------