From 48e1379b3fe35079ed3a1e910eaf984d804bb934 Mon Sep 17 00:00:00 2001 From: seth Date: Fri, 2 Aug 2024 12:56:11 +0100 Subject: [PATCH] Evolved UI --- turing-arena-frontend/package-lock.json | 196 ++++++++++++++++++- turing-arena-frontend/package.json | 7 +- turing-arena-frontend/src/App.css | 65 +++++-- turing-arena-frontend/src/App.js | 243 +++++++++++++----------- 4 files changed, 386 insertions(+), 125 deletions(-) diff --git a/turing-arena-frontend/package-lock.json b/turing-arena-frontend/package-lock.json index 49bffe86..fe35b9ec 100644 --- a/turing-arena-frontend/package-lock.json +++ b/turing-arena-frontend/package-lock.json @@ -17,6 +17,7 @@ "@testing-library/user-event": "^13.5.0", "axios": "^1.7.2", "framer-motion": "^11.3.17", + "gh-pages": "^3.2.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", @@ -24,6 +25,9 @@ "simplex-noise": "^4.0.2", "web-vitals": "^2.1.4", "webgl-fluid": "^0.3.8" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@adobe/css-tools": { @@ -668,9 +672,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1913,6 +1925,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -5597,6 +5620,14 @@ "node": ">=8" } }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/array.prototype.findlast": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz", @@ -7618,6 +7649,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz", "integrity": "sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==" }, + "node_modules/email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -8850,6 +8886,30 @@ "node": ">=10" } }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -9367,6 +9427,95 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "dependencies": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "dependencies": { + "lodash": "^4.17.14" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gh-pages/node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/gh-pages/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -13717,6 +13866,25 @@ "node": ">=0.10.0" } }, + "node_modules/pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "dependencies": { + "pinkie": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/pirates": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", @@ -16933,6 +17101,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", @@ -17460,6 +17639,17 @@ "node": ">=8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/turing-arena-frontend/package.json b/turing-arena-frontend/package.json index e24d2a2d..09394e19 100644 --- a/turing-arena-frontend/package.json +++ b/turing-arena-frontend/package.json @@ -13,14 +13,14 @@ "@testing-library/user-event": "^13.5.0", "axios": "^1.7.2", "framer-motion": "^11.3.17", + "gh-pages": "^3.2.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "react-tsparticles": "^2.12.2", "simplex-noise": "^4.0.2", "web-vitals": "^2.1.4", - "webgl-fluid": "^0.3.8", - "gh-pages": "^3.2.3" + "webgl-fluid": "^0.3.8" }, "scripts": { "predeploy": "npm run build", @@ -47,5 +47,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } } diff --git a/turing-arena-frontend/src/App.css b/turing-arena-frontend/src/App.css index 38748827..9830ad58 100644 --- a/turing-arena-frontend/src/App.css +++ b/turing-arena-frontend/src/App.css @@ -1,9 +1,8 @@ -/* src/App.css */ body { background-color: black; color: #ffffff; font-family: 'Roboto', sans-serif; - overflow: hidden; + overflow-x: hidden; position: relative; } @@ -15,6 +14,7 @@ body { height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), rgba(255, 0, 0, 0.1), rgba(0, 255, 0, 0.1), rgba(0, 0, 255, 0.1), transparent); animation: wave 10s infinite linear; + z-index: -1; } @keyframes wave { @@ -31,13 +31,17 @@ body { padding: 10px; } -.paper { +.main-container { + min-height: 100vh; + padding-bottom: 50px; /* Extra space for the leaderboard */ +} + +.paper, .chat-window { background-color: rgba(255, 255, 255, 0.9) !important; color: #000000 !important; border-radius: 15px; position: relative; overflow: hidden; - animation: borderAnimation 5s infinite; } @keyframes borderAnimation { @@ -108,11 +112,50 @@ body { background-color: #5a6268; } -.canvas-background { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; +.chat-window { + height: 400px; + overflow-y: auto; + background-color: rgba(255, 255, 255, 0.9) !important; + color: #000000 !important; + border-radius: 15px; +} + +.chat-content { + max-height: 400px; + overflow-y: auto; +} + +.chat-content::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +.chat-content::-webkit-scrollbar-thumb { + background-color: #888; + border-radius: 10px; +} + +.chat-content::-webkit-scrollbar-thumb:hover { + background-color: #555; +} + +.chat-content::-webkit-scrollbar-track { + background-color: transparent; +} + +.glowing-border { + box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset; + animation: glowingBorder 2s infinite; +} + +@keyframes glowingBorder { + 0% { + box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset; + } + 50% { + box-shadow: 0 0 15px #00ff80, 0 0 15px #00ff80 inset; + } + 100% { + box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset; + } } diff --git a/turing-arena-frontend/src/App.js b/turing-arena-frontend/src/App.js index b577ba88..001fbb08 100644 --- a/turing-arena-frontend/src/App.js +++ b/turing-arena-frontend/src/App.js @@ -1,63 +1,95 @@ -// src/App.js import React, { useState, useEffect } from 'react'; -import axios from 'axios'; import { AppBar, Toolbar, Typography, Container, TextField, - Button, Paper, Box, Grid, CircularProgress, } from '@mui/material'; -import SendIcon from '@mui/icons-material/Send'; -import ThumbUpIcon from '@mui/icons-material/ThumbUp'; -import ThumbDownIcon from '@mui/icons-material/ThumbDown'; import './App.css'; function App() { - const [topic, setTopic] = useState(''); + const [topic, setTopic] = useState('Turing Arena'); const [message, setMessage] = useState(''); - const [response, setResponse] = useState(''); + const [chatA, setChatA] = useState([]); + const [chatB, setChatB] = useState([]); const [vote, setVote] = useState(''); const [leaderboard, setLeaderboard] = useState({}); - const [loading, setLoading] = useState(false); + const [loadingA, setLoadingA] = useState(false); + const [loadingB, setLoadingB] = useState(false); useEffect(() => { - axios.get('http://localhost:5000/get_topic') - .then(res => { - setTopic(res.data.topic); - }); + // Simulate fetching topic + setTopic('Turing Arena'); }, []); - const handleResponse = (responder) => { - setLoading(true); - axios.post('http://localhost:5000/get_response', { message, responder }) - .then(res => { - setResponse(res.data.response); - setLoading(false); - }); + const handleResponse = () => { + setLoadingA(true); + setLoadingB(true); + const userMessage = { sender: 'user', text: message }; + setChatA([...chatA, userMessage]); + setChatB([...chatB, userMessage]); + + setTimeout(() => { + const aiMessageA = { sender: 'ai', text: 'Dummy response from AI 1' }; + setChatA([...chatA, userMessage, aiMessageA]); + setLoadingA(false); + }, 1000); + + setTimeout(() => { + const aiMessageB = { sender: 'ai', text: 'Dummy response from AI 2' }; + setChatB([...chatB, userMessage, aiMessageB]); + setLoadingB(false); + }, 1000); + + setMessage(''); }; const handleVote = () => { - axios.post('http://localhost:5000/submit_vote', { responder: 'AI_1', vote }) - .then(res => { - setVote(''); - setResponse(''); - setMessage(''); - }); + setVote(''); + setChatA([]); + setChatB([]); + setMessage(''); + // Simulate submitting vote + console.log('Vote submitted:', vote); }; const fetchLeaderboard = () => { - axios.get('http://localhost:5000/leaderboard') - .then(res => { - setLeaderboard(res.data); - }); + // Simulate fetching leaderboard + setLeaderboard({ + AI_1: 10, + AI_2: 15, + Tie: 5, + Both_Bad: 2, + }); }; + const renderChat = (chat) => ( + chat.map((msg, index) => ( + + + {msg.text} + + + )) + ); + return (
@@ -66,14 +98,40 @@ function App() { Turing Arena - + {topic} - - + + + Chat with AI 1 + + {loadingA && ( + + + + )} + {renderChat(chatA)} + + + + + + Chat with AI 2 + + {loadingB && ( + + + + )} + {renderChat(chatB)} + + + + + setMessage(e.target.value)} variant="outlined" multiline - rows={4} + rows={2} InputLabelProps={{ style: { color: '#000000' } }} InputProps={{ style: { color: '#000000' } }} /> - - - - + Submit + - - {loading ? ( - - - - ) : ( - response && ( - - Response: - - {response} - - - - - - - - ) - )} + + + + + + + + - - - {leaderboard && ( + + {Object.keys(leaderboard).length > 0 && ( Leaderboard