Add MAIA component with Brain visualization and localization support

Author: SimoneBendazzoli93

public/static/models/Brain.glb

@@ -468,6 +468,9 @@
         "joinedAt": "Joined at",
         "addedAt": "Added at",
         "jobRestarted": "Job restarted",
+        "maia-intro-body": "Are you interested in developing your Medical AI application in a collaborative environment with access to state-of-the-art applications and resources? MAIA is a then the right platform for you that provides researchers and students with the tools and infrastructure needed to develop, test, and deploy AI applications in the medical field. Designed to be supported with direct connection to clinical workflows and hospital infrastructures, MAIA offers a unique solution to test your ideas and see them deployed in a real-world clinical setting.",
+        "maia-intro-footer": "Request your MAIA account today and register a project to start working on your Medical AI solution.",
+        "maia-intro-header": "Discover ",
         "funding-provided-by": "kthcloud is proudly supported by a diverse group of partners. Financial backing is provided by ",
         "the": " the ",
         "program-and-the": "program and the ",

src/locales/en.json

@@ -464,6 +464,8 @@
         "joinedAt": "Gick med",
         "addedAt": "Lades till",
         "jobRestarted": "Jobb startat om",
+        "maia": "MAIA",
+        "maia-text": "BLA BLA BLA",
         "funding-provided-by": "kthcloud samarbetar med och stöttas av många organisationer. Finansiellt stöd har vi fått från ",
         "the": " ",
         "program-and-the": "programmet och ",

src/locales/se.json

@@ -5,6 +5,7 @@ import { Box, Container } from "@mui/material";
 import { useKeycloak } from "@react-keycloak/web";
 import LoadingPage from "../../components/LoadingPage";
 import Funding from "./components/funding/Funding";
+import Maia from "./components/maia/Maia";
 import { AlertList } from "../../components/AlertList";
 import { useContext, useEffect } from "react";
 import { AuthContextWrapper } from "../../contexts/AuthContextWrapper";
@@ -39,6 +40,7 @@ export function Landing() {
         </Container>
 
         <Hero />
+        <Maia />
         <Intro />
         <Funding />
       </Page>

src/pages/landing/Landing.tsx

@@ -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>
+  );
+}

src/pages/landing/components/maia/Brain.tsx

@@ -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 - 0.8, vector.x, 0);
+    }
+  });
+
+  return (
+    <mesh position={position} scale={0.03} ref={meshRef} {...props}>
+      <BrainModel />
+    </mesh>
+  );
+}

src/pages/landing/components/maia/BrainMesh.tsx

@@ -0,0 +1,100 @@
+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", marginBottom: 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 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: 4 }}
+              component={Link}
+              to="https://maia.app.cloud.cbh.kth.se/maia/register"
+            >
+              {t("button-get-started")}
+            </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",
+            }}
+          >
+            <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;

src/pages/landing/components/maia/Maia.tsx

@@ -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;
+    }
+}