-
Notifications
You must be signed in to change notification settings - Fork 4
Maiaa integration #353
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Maiaa integration #353
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
a44be8c
Add MAIA component with Brain visualization and localization support
SimoneBendazzoli93 815f269
Update MAIA component with improved introductory text and button adju…
SimoneBendazzoli93 572c58b
Ignoring glb file
harsha5500 1bd363a
Fixed formating error from prettier
harsha5500 cd2d662
format with the `format` target from the package.json file
Phillezi 55c6985
Revert "format with the `format` target from the package.json file"
Phillezi 5c167e1
Replace hard-coded url to maia with use of vite resolved env
Phillezi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,4 +11,5 @@ public/_redirects | |
| package.json | ||
| package-lock.json | ||
| bun.lockb | ||
| *.xcf | ||
| *.xcf | ||
| *.glb | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* eslint-disable react/no-unknown-property */ | ||
| import { Canvas } from "@react-three/fiber"; | ||
| import { BrainMesh } from "./BrainMesh"; | ||
| import * as THREE from "three"; | ||
|
|
||
| export function Brain({ | ||
| mobile, | ||
| position, | ||
| }: { | ||
| mobile: boolean; | ||
| position: number[]; | ||
| }) { | ||
| return ( | ||
| <Canvas | ||
| style={ | ||
| mobile | ||
| ? { height: "250px", width: "100%" } | ||
| : { | ||
| position: "absolute", | ||
| top: "0", | ||
| left: "0", | ||
| height: "100%", | ||
| width: "100%", | ||
| } | ||
| } | ||
| > | ||
| <ambientLight intensity={0.5} /> | ||
| <directionalLight position={[5, 5, 5]} intensity={2} color={"#fffecc"} /> | ||
| <directionalLight position={[5, -5, 5]} intensity={1} color={"#faa"} /> | ||
| <directionalLight position={[-5, 5, 5]} intensity={1} color={"#aaf"} /> | ||
|
|
||
| <BrainMesh | ||
| mobile={mobile} | ||
| position={position} | ||
| props={{ | ||
| material: new THREE.MeshBasicMaterial({ | ||
| color: "yellow", | ||
| }), | ||
| }} | ||
| /> | ||
| </Canvas> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| // @ts-nocheck | ||
|
|
||
| import { useRef, useEffect, useState } from "react"; | ||
| import { useFrame, useLoader } from "@react-three/fiber"; | ||
| import { GLTFLoader } from "three-stdlib"; | ||
| import { Vector3 } from "three"; | ||
|
|
||
| const url = "/static/models/Brain.glb"; | ||
|
|
||
| function BrainModel() { | ||
| const gltf = useLoader(GLTFLoader, url); | ||
| gltf.scene.traverse((child) => { | ||
| if (child.material) child.material.metalness = 0; | ||
| }); | ||
|
|
||
| return <primitive object={gltf.scene}></primitive>; | ||
| } | ||
|
|
||
| export function BrainMesh({ mobile, position, props }) { | ||
| const [mouseCoordinates, setMouseCoordinates] = useState({ x: 0, y: 0 }); | ||
| const meshRef = useRef(); | ||
|
|
||
| const mouseMoveHandler = (event) => { | ||
| setMouseCoordinates({ | ||
| x: event.clientX, | ||
| y: event.clientY, | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener("mousemove", mouseMoveHandler); | ||
| return () => { | ||
| window.removeEventListener("mousemove", mouseMoveHandler); | ||
| }; | ||
| }, []); | ||
|
|
||
| useFrame(({ camera }, delta) => { | ||
| if (mobile) { | ||
| meshRef.current.rotation.y += delta; | ||
| } else { | ||
| let x = mouseCoordinates.x / window.innerWidth; | ||
| let y = 1 - mouseCoordinates.y / window.innerHeight; | ||
| const vector = new Vector3(x, y, 0); | ||
| vector.unproject(camera); | ||
| meshRef.current.rotation.set(1 - vector.y * 20, vector.x * 10, 0); | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <mesh position={position} scale={0.03} ref={meshRef} {...props}> | ||
| <BrainModel /> | ||
| </mesh> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { | ||
| Grid, | ||
| Card, | ||
| Container, | ||
| Typography, | ||
| Button, | ||
| Stack, | ||
| Box, | ||
| } from "@mui/material"; | ||
| import "./intro.css"; | ||
| import { Brain } from "./Brain"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| const Maia = () => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <Box component="div" sx={{ overflow: "hidden", marginTop: 5 }}> | ||
| <Container maxWidth="lg"> | ||
| <Card sx={{ boxShadow: 20, background: "#242424ff", color: "#ffffff" }}> | ||
| <Grid | ||
| container | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| rowSpacing={4} | ||
| sx={{ | ||
| padding: { | ||
| xs: "50px 16px", | ||
| sm: "50px 58px", | ||
| md: "50px 50px 50px 50px", | ||
| }, | ||
| }} | ||
| > | ||
| {/* Text block - comes first on all screen sizes */} | ||
| <Grid | ||
| item | ||
| sx={{ zIndex: 6 }} | ||
| xs={12} | ||
| md={5} | ||
| order={{ xs: 1, md: 1 }} | ||
| > | ||
| <Typography | ||
| variant="h2" | ||
| sx={{ | ||
| fontWeight: "400", | ||
| marginBottom: "40px", | ||
| textAlign: { xs: "center", md: "left" }, | ||
| }} | ||
| > | ||
| {t("maia-intro-header")} <strong>MAIA</strong> | ||
| </Typography> | ||
|
|
||
| <Typography variant="subtitle1" sx={{ marginBottom: "40px" }}> | ||
| {t("maia-intro-body")} | ||
| </Typography> | ||
| <Stack direction="row" spacing={2}> | ||
| <Typography variant="subtitle2" sx={{ marginBottom: "40px" }}> | ||
| {t("maia-intro-footer")} | ||
| </Typography> | ||
|
|
||
| <Button | ||
| variant="contained" | ||
| sx={{ whiteSpace: "nowrap", px: 8 }} | ||
| component={Link} | ||
| to="https://maia.app.cloud.cbh.kth.se" | ||
| > | ||
| {t("button-get-started-maia")} | ||
| </Button> | ||
| </Stack> | ||
| </Grid> | ||
|
|
||
| {/* Brain block - comes second on desktop, second (below) on mobile */} | ||
| <Grid item xs={12} md={7} order={{ xs: 2, md: 2 }}> | ||
| {/* Desktop brain */} | ||
| <Box | ||
| component="div" | ||
| sx={{ | ||
| display: { xs: "none", sm: "none", md: "block" }, | ||
| textAlign: "right", | ||
| zIndex: 1, | ||
| }} | ||
| > | ||
| <Brain position={[3, 0, 0]} mobile={false} /> | ||
| </Box> | ||
|
|
||
| {/* Mobile brain */} | ||
| <Box | ||
| component="div" | ||
| sx={{ | ||
| display: { xs: "block", sm: "block", md: "none" }, | ||
| padding: 0, | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| <Brain mobile position={[0, 0, 0]} /> | ||
| </Box> | ||
| </Grid> | ||
| </Grid> | ||
| </Card> | ||
| </Container> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default Maia; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| .lil-curve { | ||
| width: 64px; | ||
| text-align: center; | ||
| } | ||
| .jeremy-card { | ||
| z-index: 10; | ||
| } | ||
| .blur { | ||
| position: relative; | ||
| top: 100px; | ||
| left: -150px; | ||
| z-index: 1; | ||
| margin-top: -100px; | ||
| width: 500px; | ||
| } | ||
|
|
||
| @media screen and (min-width: 900px) { | ||
| .lil-curve { | ||
| transform: translateY(-100px); | ||
| } | ||
| } | ||
| @media screen and (max-width: 900px) { | ||
| .blur { | ||
| position: relative; | ||
| top: 0px; | ||
| left: -10px; | ||
| margin: 0 auto; | ||
| margin-top: -100px; | ||
| margin-bottom: -30px; | ||
|
|
||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| .blur { | ||
| top: 0px; | ||
| left: -500px; | ||
| margin-bottom: -30px; | ||
|
|
||
| text-align: center; | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.