Homepage structure update

DEPLOY

@@ -1 +1 @@
-Deployment at: Thu Oct 31 22:47:48 CET 2024
+Deployment at: Sat, Nov 23, 2024  2:36:22 AM

apps/baseai.dev/src/app/page.tsx

@@ -1,5 +1,9 @@
-import Hero from "@/components/home/hero";
+import Hero from '@/components/home/hero';
 
 export default function Homepage() {
-    return <Hero />;
+	return (
+		<div className='w-full h-screen flex justify-center items-center bg-black'>
+			<Hero />
+		</div>
+	);
 }

apps/baseai.dev/src/components/home/hero.tsx

@@ -10,20 +10,17 @@ import WebGLInitializer from './webgl';
 import Link from 'next/link';
 const inter = Inter({ subsets: ['latin'] });
 
-export default function Hero({ }) {
+export default function Hero({}) {
 	return (
-		<div className="flex h-full flex-col items-center justify-between relative mt-[74px] sm:mt-0">
-			<div className="h-full webgl absolute -top-[26vh] flex w-full sm:-top-16">
-				<WebGLInitializer />
-			</div>
+		<div className="relative flex flex-col items-center justify-between bg-black sm:mt-0">
 			<Content />
 		</div>
 	);
 }
 
 function Content() {
 	return (
-		<div className="z-10 grid min-h-[80vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 px-6 sm:p-6 sm:mt-[104px] sm:min-h-[85vh] sm:w-[76vw]">
+		<div className="z-10 grid min-h-[80vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 px-6 -mt-12 sm:mt-[104px] sm:min-h-[85vh] sm:w-[76vw] sm:p-6">
 			<div className="col-span-2 flex items-center justify-between">
 				<div className={cn('flex items-center', inter.className)}>
 					<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
@@ -40,9 +37,11 @@ function Content() {
 				</div>
 			</div>
 
-			<div className="col-span-2"></div>
+			<div className="relative col-span-2">
+				<WebGLInitializer />
+			</div>
 
-			<div className="col-span-2 flex w-full flex-col-reverse items-center justify-between lg:flex-row lg:items-start">
+			<div className="col-span-2 flex w-full flex-col-reverse items-center justify-between pb-6 lg:flex-row lg:items-start">
 				<div className={cn('self-end lg:max-w-[60%]', inter.className)}>
 					<div
 						className="text-center text-sm lg:text-left
@@ -245,4 +244,4 @@ function CopyableCommand({ command }: CopyableCommandProps) {
 			</div>
 		</div>
 	);
-}
+}

apps/baseai.dev/src/components/home/webgl.tsx

@@ -10,24 +10,25 @@ const WebGLInitializer = () => {
 
 	useEffect(() => {
 		const scene = new THREE.Scene();
+
+		const canvas = document.createElement('canvas');
+		const parent = document.getElementById('container');
 		const camera = new THREE.PerspectiveCamera(
 			75,
-			window.innerWidth / window.innerHeight,
+			parent!.clientWidth / parent!.clientHeight,
 			0.1,
 			1000
 		);
 		const renderer = new THREE.WebGLRenderer({
 			alpha: true,
 			antialias: true
 		});
-		renderer.setSize(window.innerWidth, window.innerHeight);
+		renderer.setSize(parent!.clientWidth, parent!.clientHeight);
 		if (mountRef.current) {
 			mountRef.current.appendChild(renderer.domElement);
 		}
-
-		const canvas = document.createElement('canvas');
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
+		canvas.width = parent!.clientWidth;
+		canvas.height = parent!.clientHeight;
 
 		const textDiv = document.createElement('div');
 		textDiv.style.position = 'absolute';
@@ -52,12 +53,12 @@ const WebGLInitializer = () => {
 			const scale = PIXEL_RATIO;
 			textDiv.style.width = `${width}px`;
 			textDiv.style.height = `${height}px`;
-			textDiv.style.fontSize = `${width * 0.192}px`;
+			textDiv.style.fontSize = `${width * 0.218}px`;
 
 			await document.fonts.ready;
 			document.body.appendChild(textDiv);
 
-			const lineHeight = window.getComputedStyle(textDiv).lineHeight; 
+			const lineHeight = window.getComputedStyle(textDiv).lineHeight;
 			const y = parseFloat(lineHeight);
 
 			const canvas = await html2canvas(textDiv, {
@@ -88,8 +89,8 @@ const WebGLInitializer = () => {
 
 		const createInitialTexture = async () => {
 			const texture = await createHighResBackgroundTexture(
-				window.innerWidth,
-				window.innerHeight
+				parent!.clientWidth,
+				parent!.clientHeight
 			);
 			scene.background = texture;
 			if (material.uniforms && material.uniforms.u_background) {
@@ -102,7 +103,8 @@ const WebGLInitializer = () => {
 		const geometry = new THREE.SphereGeometry(0.75, 256, 256);
 
 		const textureLoader = new THREE.TextureLoader();
-		const envMapSize = Math.max(window.innerWidth, window.innerHeight) * 2;
+		const envMapSize =
+			Math.max(parent!.clientWidth, parent!.clientHeight) * 2;
 		const envMap = textureLoader.load(
 			'https://raw.githubusercontent.com/LangbaseInc/docs-images/refs/heads/main/www/hero/water-optim.jpg',
 			undefined,
@@ -122,8 +124,8 @@ const WebGLInitializer = () => {
 				u_time: { value: 0.0 },
 				u_resolution: {
 					value: new THREE.Vector2(
-						window.innerWidth,
-						window.innerHeight
+						parent!.clientWidth,
+						parent!.clientHeight
 					)
 				},
 				u_background: { value: null },
@@ -398,40 +400,28 @@ const WebGLInitializer = () => {
 
 		function calculateCameraZ(screenWidth: number, screenHeight: number) {
 			let cameraZ;
-
-
+			console.log(screenWidth, screenHeight);
 			if (screenWidth <= 768) {
 				if (screen.availWidth < screen.availHeight) {
-					cameraZ = 4.5;
+					cameraZ = 1.8;
 				} else {
-					cameraZ = 2;
+					cameraZ = 1.3;
 				}
 			} else if (screenWidth > 768 && screenWidth <= 1920) {
 				if (screenHeight <= 1080) {
-					cameraZ = 2; 
+					cameraZ = 1.3;
 				} else {
-					cameraZ = 1.9;
-				}
-			} else if (screenWidth > 1920 && screenWidth <= 2440) {
-				if (screenHeight <= 1080) {
-					cameraZ = 1.75;
-				} else {
-					cameraZ = 1.65;
-				}
-			} else if (screenWidth > 2440) {
-				if (screenHeight <= 1440) {
-					cameraZ = 1.5; 
-				} else {
-					cameraZ = 1.4; 
+					cameraZ = 1.4;
 				}
+			} else if (screenWidth > 1920) {
+				cameraZ = 1.3;
 			}
 
 			return cameraZ;
 		}
 
 		const screenWidth = window.innerWidth;
 		const screenHeight = window.innerHeight;
-
 		const cameraZ = calculateCameraZ(screenWidth, screenHeight);
 		if (cameraZ) camera.position.z = cameraZ;
 
@@ -440,7 +430,7 @@ const WebGLInitializer = () => {
 
 		const animate = () => {
 			requestAnimationFrame(animate);
-			material.uniforms.u_time.value += 0.02; 
+			material.uniforms.u_time.value += 0.02;
 			material.uniforms.u_viewVector.value = camera.position;
 
 			raycaster.setFromCamera(mouse, camera);
@@ -449,6 +439,7 @@ const WebGLInitializer = () => {
 				material.uniforms.u_mouse.value = intersects[0].point;
 			}
 
+			renderer.clear();
 			renderer.render(scene, camera);
 		};
 
@@ -464,8 +455,8 @@ const WebGLInitializer = () => {
 		updateCameraPosition();
 
 		const onWindowResize = () => {
-			const width = window.innerWidth;
-			const height = window.innerHeight;
+			const width = parent!.clientWidth;
+			const height = parent!.clientHeight;
 
 			camera.aspect = width / height;
 			camera.updateProjectionMatrix();
@@ -495,7 +486,19 @@ const WebGLInitializer = () => {
 		};
 	}, []);
 
-	return <div ref={mountRef} />;
+	return (
+		<div
+			style={{
+				width: '100%',
+				height: '100%',
+				position: 'relative',
+				transform: 'scale(1.2)',
+				zIndex: '-1'
+			}}
+			id="container"
+			ref={mountRef}
+		/>
+	);
 };
 
-export default WebGLInitializer;
+export default WebGLInitializer;

apps/baseai.dev/src/styles/global.css

@@ -116,3 +116,10 @@ html {
 	font-weight: normal;
 	font-style: normal;
 }
+
+canvas {
+	width: 100%;
+	height: 100%;
+	display: block; 
+}
+

examples/astro/package.json

@@ -17,7 +17,7 @@
 		"@astrojs/react": "^3.6.2",
 		"@astrojs/tailwind": "^5.1.1",
 		"@astrojs/vercel": "^7.8.1",
-		"@baseai/core": "^0.9.32",
+		"@baseai/core": "^0.9.33",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@types/react": "^18.3.9",
 		"@types/react-dom": "^18.3.0",
@@ -33,6 +33,6 @@
 		"typescript": "^5.6.2"
 	},
 	"devDependencies": {
-		"baseai": "^0.9.32"
+		"baseai": "^0.9.33"
 	}
 }

examples/nextjs/package.json

@@ -11,7 +11,7 @@
 		"baseai": "baseai"
 	},
 	"dependencies": {
-		"@baseai/core": "^0.9.32",
+		"@baseai/core": "^0.9.33",
 		"@radix-ui/react-slot": "^1.1.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
@@ -29,7 +29,7 @@
 		"@types/node": "^20",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",
-		"baseai": "^0.9.32",
+		"baseai": "^0.9.33",
 		"eslint": "^8",
 		"eslint-config-next": "14.2.5",
 		"mini-css-extract-plugin": "^2.9.0",

examples/nodejs/.env.baseai.example

@@ -19,3 +19,4 @@ GROQ_API_KEY=
 MISTRAL_API_KEY=
 PERPLEXITY_API_KEY=
 TOGETHER_API_KEY=
+XAI_API_KEY=

examples/nodejs/.gitignore

@@ -79,3 +79,7 @@ assets/img/.DS_Store
 **/.baseai/
 # env file
 .env
+# baseai
+**/.baseai/
+# env file
+.env

examples/nodejs/package.json

@@ -17,11 +17,11 @@
 	"author": "Ahmad Awais <[email protected]> (https://twitter.com/MrAhmadAwais)",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@baseai/core": "^0.9.32",
+		"@baseai/core": "^0.9.33",
 		"dotenv": "^16.4.5"
 	},
 	"devDependencies": {
-		"baseai": "^0.9.32",
+		"baseai": "0.9.29-snapshot.0",
 		"tsx": "^4.19.0"
 	}
 }

examples/remix/package.json

@@ -13,7 +13,7 @@
 		"baseai": "baseai"
 	},
 	"dependencies": {
-		"@baseai/core": "^0.9.32",
+		"@baseai/core": "^0.9.33",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@remix-run/node": "2.12.0",
 		"@remix-run/react": "2.12.0",
@@ -35,7 +35,7 @@
 		"@typescript-eslint/parser": "^6.7.4",
 		"@vercel/remix": "2.12.0",
 		"autoprefixer": "^10.4.20",
-		"baseai": "^0.9.32",
+		"baseai": "^0.9.33",
 		"eslint": "^8.38.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-import": "^2.28.1",

packages/baseai/CHANGELOG.md

@@ -1,5 +1,11 @@
 # baseai
 
+## 0.9.33
+
+### Patch Changes
+
+-   📦 NEW: Params for pipe.run() sdk support
+
 ## 0.9.32
 
 ### Patch Changes

packages/baseai/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "baseai",
 	"description": "The Web AI Framework Dev - BaseAI.dev",
-	"version": "0.9.32",
+	"version": "0.9.33",
 	"license": "UNLICENSED",
 	"type": "module",
 	"main": "./dist/index.js",

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # `baseai` SDK
 
+## 0.9.33
+
+### Patch Changes
+
+-   📦 NEW: Params for pipe.run() sdk support
+
 ## 0.9.32
 
 ### Patch Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@baseai/core",
 	"description": "The Web AI Framework's core - BaseAI.dev",
-	"version": "0.9.32",
+	"version": "0.9.33",
 	"license": "Apache-2.0",
 	"sideEffects": false,
 	"main": "./dist/index.js",