harivansh-afk/RAG-ui
1
0
Fork 0
mirror of https://github.com/harivansh-afk/RAG-ui.git synced 2026-04-15 05:02:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added UI orb to main page

Browse source
This commit is contained in:
Harivansh Rathi 2024-12-08 16:22:56 -05:00
parent 002ab0ea98
commit 457360793c
6 changed files with 976 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

4
index.html
View file

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/png" href="/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>RAG AI</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

804
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -23,7 +23,10 @@
"@radix-ui/react-switch": "^1.1.1", "@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-tooltip": "^1.0.7",
"@react-three/drei": "^9.120.3",
"@react-three/fiber": "^8.17.10",
"@supabase/supabase-js": "^2.47.0", "@supabase/supabase-js": "^2.47.0",
"@types/three": "^0.170.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"date-fns": "^3.3.1", "date-fns": "^3.3.1",
@ -34,7 +37,8 @@
"react-router-dom": "^6.22.3", "react-router-dom": "^6.22.3",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"remark-gfm": "^4.0.0", "remark-gfm": "^4.0.0",
"tailwind-merge": "^2.2.1" "tailwind-merge": "^2.2.1",
"three": "^0.171.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.9.1", "@eslint/js": "^9.9.1",

167
src/components/ui/AIOrb.tsx Normal file
View file

@ -0,0 +1,167 @@
import React, { useRef, useEffect } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Sphere } from '@react-three/drei';
import * as THREE from 'three';
import { Vector3 } from 'three';
const AnimatedSphere = () => {
const sphereRef = useRef<THREE.Mesh>(null);
const materialRef = useRef<THREE.ShaderMaterial>(null);
// Custom shader for gradient effect without glow
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
colorA: { value: new THREE.Color('#f0abfc') },
colorB: { value: new THREE.Color('#c026d3') },
colorC: { value: new THREE.Color('#6366f1') }
},
vertexShader: `
varying vec2 vUv;
varying vec3 vPosition;
uniform float time;
void main() {
vUv = uv;
vec3 pos = position;
pos.x += sin(pos.y * 4.0 + time) * 0.05;
pos.y += cos(pos.x * 4.0 + time) * 0.05;
vPosition = pos;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
uniform vec3 colorA;
uniform vec3 colorB;
uniform vec3 colorC;
uniform float time;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
float noise = sin(vPosition.x * 10.0 + time) * 0.5 + 0.5;
vec3 color = mix(colorA, colorB, vUv.y);
color = mix(color, colorC, noise);
gl_FragColor = vec4(color, 1.0);
}
`,
transparent: true,
});
useFrame(({ clock, mouse }) => {
if (!sphereRef.current || !materialRef.current) return;
// Update shader time uniform
materialRef.current.uniforms.time.value = clock.getElapsedTime() * 0.5; // Slower animation
// Smooth rotation
sphereRef.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.2) * 0.1;
sphereRef.current.rotation.y += 0.0005;
// Mouse interaction with smoother movement
const target = new Vector3(
(mouse.x * window.innerWidth) / 150,
(mouse.y * window.innerHeight) / 150,
0
);
sphereRef.current.position.lerp(target, 0.03);
});
return (
<Sphere ref={sphereRef} args={[0.8, 64, 64]}>
<primitive object={shaderMaterial} ref={materialRef} attach="material" />
</Sphere>
);
};
const ParticleRing = () => {
const particleCount = 100; // Reduced particle count
const points = Array.from({ length: particleCount }, (_, i) => {
const angle = (i / particleCount) * Math.PI * 2;
const radius = 1.5 + Math.random() * 0.1;
return new THREE.Vector3(
Math.cos(angle) * radius,
Math.sin(angle) * radius,
(Math.random() - 0.5) * 0.2
);
});
const particleRef = useRef<THREE.Points>(null);
useFrame(({ clock }) => {
if (!particleRef.current) return;
particleRef.current.rotation.z = clock.getElapsedTime() * 0.05;
particleRef.current.position.y = Math.sin(clock.getElapsedTime() * 0.3) * 0.05;
});
return (
<points ref={particleRef}>
<bufferGeometry>
<bufferAttribute
attach="attributes-position"
count={points.length}
array={new Float32Array(points.flatMap(p => [p.x, p.y, p.z]))}
itemSize={3}
/>
</bufferGeometry>
<pointsMaterial
size={0.02}
color="#f0abfc"
transparent
opacity={0.4}
sizeAttenuation
/>
</points>
);
};
const AIOrb: React.FC = () => {
useEffect(() => {
// Force hardware acceleration
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl', {
powerPreference: 'high-performance',
antialias: true,
alpha: true,
stencil: false
});
if (gl) gl.getExtension('WEBGL_lose_context');
}, []);
return (
<div className="relative w-[300px] h-[300px] mx-auto">
<Canvas
className="relative z-10"
dpr={Math.min(2, window.devicePixelRatio)}
camera={{ position: [0, 0, 4], fov: 45 }}
gl={{
alpha: true,
antialias: true,
powerPreference: 'high-performance',
stencil: false
}}
onCreated={({ gl }) => {
gl.setClearColor(0x000000, 0);
}}
>
<ambientLight intensity={0.3} />
<pointLight position={[10, 10, 10]} intensity={0.7} />
<pointLight position={[-10, -10, -10]} intensity={0.3} />
<AnimatedSphere />
<ParticleRing />
<OrbitControls
enableZoom={false}
enablePan={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
autoRotate
autoRotateSpeed={0.3}
/>
</Canvas>
</div>
);
};
export default AIOrb;

10
src/pages/Home.tsx
View file

@ -3,17 +3,21 @@ import { ArrowRight, Brain, Sparkles, Users, FileText, Zap, Shield, MessageSquar
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button } from '../components/ui/Button'; import { Button } from '../components/ui/Button';
import { Header } from '../components/layout/Header'; import { Header } from '../components/layout/Header';
import AIOrb from '../components/ui/AIOrb';
function Home() { function Home() {
return ( return (
<div className="flex h-screen flex-col overflow-hidden"> <div className="flex h-screen flex-col overflow-hidden">
<Header /> <Header />
<main className="flex-1 overflow-y-auto pt-24"> <main className="flex-1 overflow-y-auto pt-16">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
{/* Hero Section */} {/* Hero Section */}
<section className="py-20"> <section className="py-12">
<div className="max-w-4xl mx-auto text-center space-y-6 animate-in fade-in slide-in-from-bottom-8 duration-1000"> <div className="max-w-4xl mx-auto text-center space-y-6 animate-in fade-in slide-in-from-bottom-8 duration-1000">
<div className="relative mb-6">
<AIOrb />
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background z-10" />
</div>
<h1 className="text-6xl font-bold mb-6 gradient-text leading-tight"> <h1 className="text-6xl font-bold mb-6 gradient-text leading-tight">
Advanced Document Intelligence with RAG AI Advanced Document Intelligence with RAG AI
</h1> </h1>