Emrewiesse/anycoder-4a7801a1
0
1=== Dockerfile ===2FROM node:18-alpine3 4WORKDIR /app5 6COPY package.json package-lock.json* ./7 8RUN npm install9 10COPY . .11 12RUN npm run build13 14EXPOSE 300015 16CMD ["npm", "start"]17 18=== package.json ===19{20 "name": "turkish-ai-app",21 "version": "0.1.0",22 "private": true,23 "scripts": {24 "dev": "next dev",25 "build": "next build",26 "start": "next start",27 "lint": "next lint"28 },29 "dependencies": {30 "lucide-react": "^0.263.1",31 "next": "13.4.12",32 "react": "18.2.0",33 "react-dom": "18.2.0"34 },35 "devDependencies": {36 "autoprefixer": "^10.4.14",37 "postcss": "^8.4.27",38 "tailwindcss": "^3.3.3"39 }40}41 42=== next.config.js ===43/** @type {import('next').NextConfig} */44const nextConfig = {45 reactStrictMode: true,46 output: 'standalone',47}48 49module.exports = nextConfig50 51=== postcss.config.js ===52module.exports = {53 plugins: {54 tailwindcss: {},55 autoprefixer: {},56 },57}58 59=== tailwind.config.js ===60/** @type {import('tailwindcss').Config} */61module.exports = {62 darkMode: 'class',63 content: [64 './pages/**/*.{js,ts,jsx,tsx,mdx}',65 './components/**/*.{js,ts,jsx,tsx,mdx}',66 './app/**/*.{js,ts,jsx,tsx,mdx}',67 ],68 theme: {69 extend: {70 colors: {71 primary: {72 50: '#eff6ff',73 100: '#dbeafe',74 500: '#3b82f6',75 600: '#2563eb',76 700: '#1d4ed8',77 }78 }79 },80 },81 plugins: [],82}83 84=== styles/globals.css ===85@tailwind base;86@tailwind components;87@tailwind utilities;88 89:root {90 --foreground-rgb: 0, 0, 0;91 --background-start-rgb: 214, 219, 220;92 --background-end-rgb: 255, 255, 255;93}94 95@media (prefers-color-scheme: dark) {96 :root {97 --foreground-rgb: 255, 255, 255;98 --background-start-rgb: 0, 0, 0;99 --background-end-rgb: 0, 0, 0;100 }101}102 103body {104 @apply transition-colors duration-300 ease-in-out;105}106 107=== components/ThemeToggle.jsx ===108import React from 'react';109import { Moon, Sun } from 'lucide-react';110 111const ThemeToggle = ({ isDark, toggleTheme }) => {112 return (113 <button114 onClick={toggleTheme}115 className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"116 aria-label="Temayı Değiştir"117 >118 {isDark ? (119 <Sun className="w-6 h-6 text-yellow-400" />120 ) : (121 <Moon className="w-6 h-6 text-slate-700" />122 )}123 </button>124 );125};126 127export default ThemeToggle;128 129=== components/AIInputSection.jsx ===130import React, { useState } from 'react';131import { Send, Loader2, Bot } from 'lucide-react';132 133const AIInputSection = () => {134 const [input, setInput] = useState('');135 const [response, setResponse] = useState('');136 const [loading, setLoading] = useState(false);137 const [error, setError] = useState('');138 139 const handleSubmit = async (e) => {140 e.preventDefault();141 if (!input.trim()) return;142 143 setLoading(true);144 setError('');145 setResponse('');146 147 try {148 const res = await fetch('/api/generate', {149 method: 'POST',150 headers: {151 'Content-Type': 'application/json',152 },153 body: JSON.stringify({ prompt: input }),154 });155 156 const data = await res.json();157 158 if (!res.ok) {159 throw new Error(data.message || 'Bir hata oluştu');160 }161 162 setResponse(data.result);163 } catch (err) {164 setError('İstek işlenirken bir hata oluştu. Lütfen tekrar deneyin.');165 } finally {166 setLoading(false);167 }168 };169 170 return (171 <div className="w-full max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-700">172 <div className="p-6">173 <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 flex items-center gap-2">174 <Bot className="w-6 h-6 text-primary-600" />175 AI Asistanı ile Konuşun176 </h2>177 <p className="text-gray-600 dark:text-gray-300 mb-6">178 Türkçe bir şeyler yazın, yapay zeka sizin için İngilizce'ye çevirip işlesin.179 </p>180 181 <form onSubmit={handleSubmit} className="space-y-4">182 <div>183 <label htmlFor="prompt" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">184 İsteğiniz (Türkçe)185 </label>186 <textarea187 id="prompt"188 rows="4"189 className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all outline-none resize-none"190 placeholder="Örnek: Bana uzay hakkında kısa bir hikaye anlat..."191 value={input}192 onChange={(e) => setInput(e.target.value)}193 />194 </div>195 196 <button197 type="submit"198 disabled={loading || !input.trim()}199 className="w-full py-3 px-4 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"200 >201 {loading ? (202 <>203 <Loader2 className="w-5 h-5 animate-spin" />204 İşleniyor...205 </>206 ) : (207 <>208 <Send className="w-5 h-5" />209 Gönder210 </>211 )}212 </button>213 </form>214 215 {error && (216 <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">217 {error}218 </div>219 )}220 221 {response && (222 <div className="mt-6 animate-in fade-in slide-in-from-bottom-4 duration-500">223 <div className="bg-primary-50 dark:bg-primary-900/20 border border-primary-100 dark:border-primary-800 rounded-lg p-4">224 <h3 className="text-sm font-bold text-primary-800 dark:text-primary-300 mb-2 uppercase tracking-wider">225 AI Yanıtı226 </h3>227 <p className="text-gray-800 dark:text-gray-200 leading-relaxed whitespace-pre-wrap">228 {response}229 </p>230 </div>231 </div>232 )}233 </div>234 </div>235 );236};237 238export default AIInputSection;239 240=== pages/api/generate.js ===241export default async function handler(req, res) {242 if (req.method !== 'POST') {243 return res.status(405).json({ message: 'Method not allowed' });244 }245 246 const { prompt } = req.body;247 248 if (!prompt) {249 return res.status(400).json({ message: 'Prompt gereklidir' });250 }251 252 // Simulate network delay253 await new Promise((resolve) => setTimeout(resolve, 1500));254 255 // Mock translation and AI response logic256 // In a real app, this would call OpenAI or similar API257 const mockResponses = [258 "Bu çok ilginç bir konu! Girdiğiniz metin İngilizce'ye çevrildi ve analiz edildi.",259 "Yapay zeka sistemimiz isteğinizi başarıyla işledi. İşte bulduğumuz sonuçlar.",260 "Harika bir soru. Veritabanımızda buna uygun detaylı bilgiler mevcut.",261 "Türkçe girdiniz anlaşıldı. İngilizce prompt olarak işlendi: '" + prompt + "' [Translated]"262 ];263 264 const randomResponse = mockResponses[Math.floor(Math.random() * mockResponses.length)];265 266 return res.status(200).json({267 success: true,268 result: `${randomResponse}\n\n(Not: Bu bir simülasyon yanıtıdır. Gerçek bir API bağlantısı kurulduğunda burada akıllı bir cevap göreceksiniz.)`269 });270}271 272=== pages/_app.js ===273import '@/styles/globals.css';274import { useState, useEffect } from 'react';275 276export default function App({ Component, pageProps }) {277 const [isDark, setIsDark] = useState(false);278 279 useEffect(() => {280 // Check system preference or local storage on mount281 if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {282 setIsDark(true);283 document.documentElement.classList.add('dark');284 } else {285 setIsDark(false);286 document.documentElement.classList.remove('dark');287 }288 }, []);289 290 const toggleTheme = () => {291 if (isDark) {292 document.documentElement.classList.remove('dark');293 localStorage.theme = 'light';294 setIsDark(false);295 } else {296 document.documentElement.classList.add('dark');297 localStorage.theme = 'dark';298 setIsDark(true);299 }300 };301 302 return (303 <Component {...pageProps} isDark={isDark} toggleTheme={toggleTheme} />304 );305}306 307=== pages/index.js ===308import Head from 'next/head';309import { useRef } from 'react';310import { ArrowDown } from 'lucide-react';311import ThemeToggle from '@/components/ThemeToggle';312import AIInputSection from '@/components/AIInputSection';313 314export default function Home({ isDark, toggleTheme }) {315 const startSectionRef = useRef(null);316 317 const scrollToStart = () => {318 startSectionRef.current?.scrollIntoView({ behavior: 'smooth' });319 };320 321 return (322 <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-300">323 <Head>324 <title>Türkçe AI Uygulaması</title>325 <meta name="description" content="Türkçe arayüzlü React uygulaması" />326 <meta name="viewport" content="width=device-width, initial-scale=1" />327 </Head>328 329 {/* Header */}330 <header className="sticky top-0 z-50 w-full backdrop-blur-md bg-white/80 dark:bg-gray-900/80 border-b border-gray-200 dark:border-gray-800">331 <div className="container mx-auto px-4 h-16 flex items-center justify-between">332 <div className="flex items-center gap-4">333 <h1 className="text-xl font-bold text-gray-900 dark:text-white">334 Hoş Geldiniz335 </h1>336 </div>337 338 <div className="flex items-center gap-4">339 <a 340 href="https://huggingface.co/spaces/akhaliq/anycoder" 341 target="_blank" 342 rel="noopener noreferrer"343 className="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors hidden sm:block"344 >345 Built with anycoder346 </a>347 <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />348 </div>349 </div>350 </header>351 352 <main className="flex-grow flex flex-col">353 {/* Hero Section */}354 <section className="flex flex-col items-center justify-center py-20 px-4 text-center bg-gradient-to-b from-white to-gray-100 dark:from-gray-900 dark:to-gray-800">355 <div className="max-w-3xl mx-auto space-y-6 animate-in fade-in zoom-in duration-700">356 <h2 className="text-4xl md:text-6xl font-extrabold text-gray-900 dark:text-white tracking-tight">357 Yapay Zeka İle <br/>358 <span className="text-primary-600 dark:text-primary-400">Geleceği Keşfedin</span>359 </h2>360 <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">361 Modern teknolojiyi Türkçe arayüz ile deneyimleyin. Basit, hızlı ve kullanıcı dostu.362 </p>363 <div className="pt-8">364 <button365 onClick={scrollToStart}366 className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-primary-600 font-pj rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 hover:bg-primary-700 dark:hover:bg-primary-500"367 >368 Başla369 <ArrowDown className="ml-2 w-5 h-5 group-hover:translate-y-1 transition-transform" />370 </button>371 </div>372 </div>373 </section>374 375 {/* Main Functionality Section */}376 <section ref={startSectionRef} className="py-20 px-4 bg-gray-100 dark:bg-gray-800/50">377 <div className="container mx-auto">378 <div className="text-center mb-12">379 <h3 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">380 Deneyime Başlayın381 </h3>382 <p className="text-gray-600 dark:text-gray-400">383 Aşağıdaki alanı kullanarak yapay zeka modelimizle etkileşime geçin.384 </p>385 </div>386 <AIInputSection />387 </div>388 </section>389 </main>390 391 {/* Footer */}392 <footer className="py-8 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">393 <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4">394 <p className="text-gray-500 dark:text-gray-400 text-sm">395 © 2025 Tüm Hakları Saklıdır396 </p>397 <div className="flex items-center gap-6">398 <a 399 href="https://huggingface.co/spaces/akhaliq/anycoder" 400 target="_blank" 401 rel="noopener noreferrer"402 className="text-xs text-gray-400 hover:text-primary-500 transition-colors"403 >404 Built with anycoder405 </a>406 </div>407 </div>408 </footer>409 </div>410 );411}