Skip to content

Commit

Permalink
Assistant checkpoint: Implement modern UI with enhanced styling and a…
Browse files Browse the repository at this point in the history 
…nimations

Assistant generated file changes:
- pages/index.js: Implement modern, polished UI design
- styles/globals.css: Add custom styles

---

User prompt:

This is the UI you created that was supposed to be state of the art and modern but is the most plain bulshit I've seen any ai create
  • Loading branch information
@redx94
redx94 committed Dec 15, 2024
1 parent ab82494 commit 273142b
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 57 deletions.
138 changes: 82 additions & 56 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,73 +4,99 @@ import { useState } from 'react'

export default function Home() {
const [input, setInput] = useState('')
const [loading, setLoading] = useState(false)
const [result, setResult] = useState(null)

const analyzeText = async () => {
const response = await fetch('/api/analyze', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: input })
})
const data = await response.json()
setResult(data)
if (!input.trim()) return
setLoading(true)
try {
const response = await fetch('/api/analyze', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: input })
})
const data = await response.json()
setResult(data)
} catch (error) {
console.error('Analysis failed:', error)
}
setLoading(false)
}

return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white">
<main className="container mx-auto px-4 py-20">
<motion.h1
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
className="text-6xl font-bold text-center mb-8"
<div className="min-h-screen bg-[#0A0A0F] text-white">
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-blue-900/20" />
<main className="relative container mx-auto px-4 py-12">
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-4xl mx-auto"
>
WholeBrainedIntelligence
</motion.h1>

<div className="max-w-3xl mx-auto space-y-8">
<h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent text-center mb-8">
WholeBrainedIntelligence
</h1>
<motion.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
className="bg-white/10 p-6 rounded-lg backdrop-blur-lg"
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
className="space-y-6"
>
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
className="w-full h-32 bg-black/50 rounded p-4 text-white"
placeholder="Enter your text for analysis..."
/>
<button
onClick={analyzeText}
className="mt-4 px-6 py-2 bg-blue-600 rounded-full hover:bg-blue-700 transition-colors"
>
Analyze
</button>
</motion.div>
<div className="bg-white/5 backdrop-blur-lg rounded-xl p-6 border border-white/10 shadow-xl">
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
className="w-full h-40 bg-black/30 rounded-lg p-4 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
placeholder="Enter your text for analysis..."
/>
<div className="mt-4 flex justify-end">
<button
onClick={analyzeText}
disabled={loading || !input.trim()}
className={`px-6 py-2.5 rounded-lg font-medium transition-all duration-200 ${
loading || !input.trim()
? 'bg-gray-600 cursor-not-allowed'
: 'bg-gradient-to-r from-blue-500 to-purple-500 hover:opacity-90'
}`}
>
{loading ? 'Analyzing...' : 'Analyze'}
</button>
</div>
</div>

{result && (
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
className="bg-white/10 p-6 rounded-lg backdrop-blur-lg"
>
<h2 className="text-xl font-semibold mb-4">Analysis Results</h2>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-gray-400">Complexity Score</p>
<p className="text-2xl">{result.complexity_score.toFixed(2)}</p>
</div>
<div>
<p className="text-gray-400">Sentiment</p>
<p className="text-2xl capitalize">{result.sentiment}</p>
{result && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="bg-white/5 backdrop-blur-lg rounded-xl p-6 border border-white/10 shadow-xl"
>
<h2 className="text-xl font-semibold mb-6 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
Analysis Results
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white/5 rounded-lg p-4">
<p className="text-gray-400 text-sm">Complexity Score</p>
<p className="text-2xl font-semibold mt-1">
{result.complexity_score?.toFixed(2) || 'N/A'}
</p>
</div>
<div className="bg-white/5 rounded-lg p-4">
<p className="text-gray-400 text-sm">Sentiment</p>
<p className="text-2xl font-semibold mt-1 capitalize">
{result.sentiment || 'N/A'}
</p>
</div>
<div className="bg-white/5 rounded-lg p-4">
<p className="text-gray-400 text-sm">Confidence</p>
<p className="text-2xl font-semibold mt-1">
{result.confidence ? `${(result.confidence * 100).toFixed(0)}%` : 'N/A'}
</p>
</div>
</div>
<div>
<p className="text-gray-400">Confidence</p>
<p className="text-2xl">{(result.confidence * 100).toFixed(0)}%</p>
</div>
</div>
</motion.div>
)}
</div>
</motion.div>
)}
</motion.div>
</motion.div>
</main>
</div>
)
Expand Down
19 changes: 18 additions & 1 deletion styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,22 @@
@tailwind utilities;

body {
@apply antialiased;
@apply antialiased bg-[#0A0A0F];
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}

0 comments on commit 273142b

Please sign in to comment.