use openweb ui
This commit is contained in:
parent
ef1af2171d
commit
eb9680395a
176
package-lock.json
generated
176
package-lock.json
generated
@ -12,8 +12,7 @@
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"replicate": "^1.0.1"
|
||||
"remark-gfm": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
@ -1935,19 +1934,6 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/abort-controller": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
|
||||
"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"event-target-shim": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.5"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.15.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
@ -2251,27 +2237,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
@ -2296,31 +2261,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/buffer": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
|
||||
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"base64-js": "^1.3.1",
|
||||
"ieee754": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
|
||||
@ -3419,26 +3359,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/event-target-shim": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
|
||||
"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/events": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
|
||||
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=0.8.x"
|
||||
}
|
||||
},
|
||||
"node_modules/extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
@ -3911,27 +3831,6 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/ieee754": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
||||
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "BSD-3-Clause",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@ -6309,16 +6208,6 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
@ -6427,23 +6316,6 @@
|
||||
"react": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
|
||||
"integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"abort-controller": "^3.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"events": "^3.3.0",
|
||||
"process": "^0.11.10",
|
||||
"string_decoder": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@ -6554,21 +6426,6 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/replicate": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/replicate/-/replicate-1.0.1.tgz",
|
||||
"integrity": "sha512-EY+rK1YR5bKHcM9pd6WyaIbv6m2aRIvHfHDh51j/LahlHTLKemTYXF6ptif2sLa+YospupAsIoxw8Ndt5nI3vg==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"git": ">=2.11.0",
|
||||
"node": ">=18.0.0",
|
||||
"npm": ">=7.19.0",
|
||||
"yarn": ">=1.7.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"readable-stream": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.10",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
|
||||
@ -6665,27 +6522,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/safe-push-apply": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
|
||||
@ -6988,16 +6824,6 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.includes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"replicate": "^1.0.1"
|
||||
"remark-gfm": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
|
||||
21
public/manifest.json
Normal file
21
public/manifest.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Anything vs Anything - AI Comparison Tool",
|
||||
"short_name": "Anything vs Anything",
|
||||
"description": "Compare any two things with AI-powered analysis",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#3B82F6",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/favicon.ico",
|
||||
"sizes": "48x48",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "/apple-touch-icon.png",
|
||||
"sizes": "180x180",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
5
public/robots.txt
Normal file
5
public/robots.txt
Normal file
@ -0,0 +1,5 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /api/
|
||||
|
||||
Sitemap: https://anything-vs-anything.com/sitemap.xml
|
||||
@ -1,9 +1,4 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import Replicate from 'replicate';
|
||||
|
||||
const replicate = new Replicate({
|
||||
auth: process.env.REPLICATE_API_TOKEN,
|
||||
});
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
@ -31,22 +26,37 @@ Please provide a comprehensive comparison in a markdown table format with the fo
|
||||
|
||||
The table should have three columns: Aspect, ${item1}, ${item2}`;
|
||||
|
||||
const output = await replicate.run(
|
||||
process.env.REPLICATE_MODEL || "meta/llama-2-70b-chat:02e509c789964a7ea8736978a43525956ef40397be9033abf9fd2badfe68c9e3",
|
||||
{
|
||||
input: {
|
||||
prompt: prompt,
|
||||
max_new_tokens: 1000,
|
||||
temperature: 0.7,
|
||||
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
|
||||
'Content-Type': 'application/json',
|
||||
'HTTP-Referer': process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com',
|
||||
'X-Title': 'Anything vs Anything',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: process.env.OPENROUTER_MODEL || 'anthropic/claude-3.5-sonnet',
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: prompt
|
||||
}
|
||||
);
|
||||
],
|
||||
temperature: 0.7,
|
||||
max_tokens: 2000,
|
||||
}),
|
||||
});
|
||||
|
||||
const comparison = Array.isArray(output) ? output.join('') : output;
|
||||
if (!response.ok) {
|
||||
throw new Error(`OpenRouter API error: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const comparison = data.choices[0]?.message?.content || 'No comparison generated';
|
||||
|
||||
return NextResponse.json({ comparison });
|
||||
} catch (error) {
|
||||
console.error('Error calling Replicate API:', error);
|
||||
console.error('Error calling OpenRouter API:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to generate comparison' },
|
||||
{ status: 500 }
|
||||
|
||||
@ -25,6 +25,44 @@ body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Mobile optimizations */
|
||||
@media (max-width: 640px) {
|
||||
.prose {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.prose table th,
|
||||
.prose table td {
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading animation keyframes */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
* {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.prose table {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
|
||||
@ -13,8 +13,57 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Anything vs Anything - AI-Powered Comparison Tool",
|
||||
description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more. Free online comparison generator with intelligent insights.",
|
||||
keywords: "comparison tool, AI comparison, product comparison, service comparison, vs tool, compare anything, analysis tool, decision making",
|
||||
authors: [{ name: "Anything vs Anything" }],
|
||||
creator: "Anything vs Anything",
|
||||
publisher: "Anything vs Anything",
|
||||
formatDetection: {
|
||||
email: false,
|
||||
address: false,
|
||||
telephone: false,
|
||||
},
|
||||
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'),
|
||||
alternates: {
|
||||
canonical: '/',
|
||||
},
|
||||
openGraph: {
|
||||
title: "Anything vs Anything - AI-Powered Comparison Tool",
|
||||
description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more.",
|
||||
url: '/',
|
||||
siteName: "Anything vs Anything",
|
||||
locale: 'en_US',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: '/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'Anything vs Anything - AI Comparison Tool',
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: "Anything vs Anything - AI-Powered Comparison Tool",
|
||||
description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more.",
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
verification: {
|
||||
google: process.env.GOOGLE_SITE_VERIFICATION,
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -24,6 +73,36 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="theme-color" content="#3B82F6" />
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebApplication",
|
||||
"name": "Anything vs Anything",
|
||||
"description": "AI-powered comparison tool that helps you compare any two things with detailed analysis and insights",
|
||||
"url": process.env.NEXT_PUBLIC_SITE_URL || "https://anything-vs-anything.com",
|
||||
"applicationCategory": "Utility",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
},
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Anything vs Anything"
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
@ -39,18 +39,33 @@ export default function Home() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-6 md:py-12">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
Anything vs Anything
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
<p className="text-xl md:text-2xl text-gray-600 mb-4">
|
||||
Compare any two things using AI-powered analysis
|
||||
</p>
|
||||
<p className="text-lg text-gray-500 max-w-3xl mx-auto mb-8">
|
||||
From products and services to concepts and ideas - get comprehensive, unbiased comparisons
|
||||
powered by artificial intelligence. Make informed decisions with detailed analysis.
|
||||
</p>
|
||||
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Popular Comparisons</h2>
|
||||
<div className="flex flex-wrap justify-center gap-2 sm:gap-3">
|
||||
<span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">iPhone vs Samsung Galaxy</span>
|
||||
<span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">React vs Vue.js</span>
|
||||
<span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Coffee vs Tea</span>
|
||||
<span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Netflix vs Disney+</span>
|
||||
<span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Python vs JavaScript</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 mb-8">
|
||||
<div className={`bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8 transition-all duration-300 ${isLoading ? 'opacity-75 pointer-events-none' : ''}`}>
|
||||
<ComparisonForm onSubmit={handleComparison} isLoading={isLoading} />
|
||||
</div>
|
||||
|
||||
|
||||
14
src/app/sitemap.ts
Normal file
14
src/app/sitemap.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { MetadataRoute } from 'next'
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'
|
||||
|
||||
return [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'daily',
|
||||
priority: 1,
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -14,6 +14,25 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
|
||||
const [description2, setDescription2] = useState('');
|
||||
const [showDescriptions, setShowDescriptions] = useState(false);
|
||||
|
||||
const examples = [
|
||||
{ item1: 'iPhone 15 Pro', item2: 'Samsung Galaxy S24 Ultra', category: 'Smartphones' },
|
||||
{ item1: 'React', item2: 'Vue.js', category: 'Frontend Frameworks' },
|
||||
{ item1: 'Tesla Model 3', item2: 'BMW i4', category: 'Electric Cars' },
|
||||
{ item1: 'Netflix', item2: 'Disney+', category: 'Streaming Services' },
|
||||
{ item1: 'MacBook Pro', item2: 'ThinkPad X1 Carbon', category: 'Laptops' },
|
||||
{ item1: 'Coffee', item2: 'Tea', category: 'Beverages' }
|
||||
];
|
||||
|
||||
const getRandomExample = () => {
|
||||
return examples[Math.floor(Math.random() * examples.length)];
|
||||
};
|
||||
|
||||
const fillRandomExample = () => {
|
||||
const example = getRandomExample();
|
||||
setItem1(example.item1);
|
||||
setItem2(example.item2);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (item1.trim() && item2.trim()) {
|
||||
@ -22,36 +41,65 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">Start Your Comparison</h2>
|
||||
<p className="text-gray-600 mb-4">Enter any two items you want to compare - products, services, concepts, or ideas</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillRandomExample}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm font-medium underline"
|
||||
>
|
||||
Try a random example
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="item1" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
First Item
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="item1"
|
||||
value={item1}
|
||||
onChange={(e) => setItem1(e.target.value)}
|
||||
placeholder="e.g., iPhone"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="e.g., iPhone 15 Pro, React, Tesla Model 3"
|
||||
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="item2" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Second Item
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="item2"
|
||||
value={item2}
|
||||
onChange={(e) => setItem2(e.target.value)}
|
||||
placeholder="e.g., Android Phone"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="e.g., Samsung Galaxy S24, Vue.js, BMW i4"
|
||||
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,28 +119,44 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
|
||||
<label htmlFor="description1" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Description for {item1 || 'First Item'}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
id="description1"
|
||||
value={description1}
|
||||
onChange={(e) => setDescription1(e.target.value)}
|
||||
placeholder="Additional details about the first item..."
|
||||
placeholder="Additional details, specifications, or context about the first item..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="description2" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Description for {item2 || 'Second Item'}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
id="description2"
|
||||
value={description2}
|
||||
onChange={(e) => setDescription2(e.target.value)}
|
||||
placeholder="Additional details about the second item..."
|
||||
placeholder="Additional details, specifications, or context about the second item..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -101,11 +165,19 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !item1.trim() || !item2.trim()}
|
||||
className="px-8 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? 'Comparing...' : 'Compare Now'}
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||
Analyzing & Comparing...
|
||||
</>
|
||||
) : (
|
||||
'Compare Now'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
139
src/components/ComparisonHistory.tsx
Normal file
139
src/components/ComparisonHistory.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export interface HistoryItem {
|
||||
id: string;
|
||||
item1: string;
|
||||
item2: string;
|
||||
description1: string;
|
||||
description2: string;
|
||||
result: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
interface ComparisonHistoryProps {
|
||||
onSelectHistory: (item: HistoryItem) => void;
|
||||
}
|
||||
|
||||
export default function ComparisonHistory({ onSelectHistory }: ComparisonHistoryProps) {
|
||||
const [history, setHistory] = useState<HistoryItem[]>([]);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadHistory = () => {
|
||||
try {
|
||||
const stored = localStorage.getItem('comparison-history');
|
||||
if (stored) {
|
||||
const parsed = JSON.parse(stored);
|
||||
setHistory(parsed.slice(0, 10)); // Keep only last 10 items
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading history:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadHistory();
|
||||
|
||||
// Listen for storage changes
|
||||
const handleStorageChange = () => {
|
||||
loadHistory();
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
// Custom event for same-page updates
|
||||
window.addEventListener('comparison-history-updated', handleStorageChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.removeEventListener('comparison-history-updated', handleStorageChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const clearHistory = () => {
|
||||
localStorage.removeItem('comparison-history');
|
||||
setHistory([]);
|
||||
window.dispatchEvent(new Event('comparison-history-updated'));
|
||||
};
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
if (history.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-900">Comparison History</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||||
>
|
||||
{isExpanded ? 'Show Less' : `Show All (${history.length})`}
|
||||
</button>
|
||||
<button
|
||||
onClick={clearHistory}
|
||||
className="text-red-600 hover:text-red-800 text-sm font-medium"
|
||||
>
|
||||
Clear History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{(isExpanded ? history : history.slice(0, 3)).map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => onSelectHistory(item)}
|
||||
className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="font-medium text-gray-900">
|
||||
<span className="text-blue-600">{item.item1}</span>
|
||||
<span className="text-gray-400 mx-2">vs</span>
|
||||
<span className="text-green-600">{item.item2}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(item.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
{(item.description1 || item.description2) && (
|
||||
<div className="text-sm text-gray-600">
|
||||
{item.description1 && (
|
||||
<div className="truncate">
|
||||
<strong>{item.item1}:</strong> {item.description1}
|
||||
</div>
|
||||
)}
|
||||
{item.description2 && (
|
||||
<div className="truncate">
|
||||
<strong>{item.item2}:</strong> {item.description2}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!isExpanded && history.length > 3 && (
|
||||
<div className="text-center mt-4">
|
||||
<button
|
||||
onClick={() => setIsExpanded(true)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||||
>
|
||||
View {history.length - 3} more comparisons...
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -11,7 +11,7 @@ export default function ComparisonResults({ results }: ComparisonResultsProps) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Comparison Results</h2>
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<div className="prose prose-lg max-w-none mb-8">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
@ -46,6 +46,16 @@ export default function ComparisonResults({ results }: ComparisonResultsProps) {
|
||||
{results}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 p-4 bg-gray-50 rounded-lg border-t">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">💡 Tips for better comparisons:</h3>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• Be specific: "iPhone 15 Pro" vs "iPhone 15"</li>
|
||||
<li>• Add context in descriptions for nuanced analysis</li>
|
||||
<li>• Compare similar categories for meaningful results</li>
|
||||
<li>• Try abstract concepts too: "Remote work" vs "Office work"</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
src/utils/historyStorage.ts
Normal file
54
src/utils/historyStorage.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import { HistoryItem } from '@/components/ComparisonHistory';
|
||||
|
||||
export const saveToHistory = (
|
||||
item1: string,
|
||||
item2: string,
|
||||
description1: string,
|
||||
description2: string,
|
||||
result: string
|
||||
) => {
|
||||
try {
|
||||
const historyItem: HistoryItem = {
|
||||
id: Date.now().toString(),
|
||||
item1,
|
||||
item2,
|
||||
description1,
|
||||
description2,
|
||||
result,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
const existing = localStorage.getItem('comparison-history');
|
||||
let history: HistoryItem[] = [];
|
||||
|
||||
if (existing) {
|
||||
history = JSON.parse(existing);
|
||||
}
|
||||
|
||||
// Add new item to the beginning
|
||||
history.unshift(historyItem);
|
||||
|
||||
// Keep only last 50 items
|
||||
history = history.slice(0, 50);
|
||||
|
||||
localStorage.setItem('comparison-history', JSON.stringify(history));
|
||||
|
||||
// Dispatch custom event for same-page updates
|
||||
window.dispatchEvent(new Event('comparison-history-updated'));
|
||||
|
||||
return historyItem;
|
||||
} catch (error) {
|
||||
console.error('Error saving to history:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const getHistory = (): HistoryItem[] => {
|
||||
try {
|
||||
const stored = localStorage.getItem('comparison-history');
|
||||
return stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error('Error loading history:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user