Added stability, and added sponsors to inference interface (#2383)

website/src/components/Chat/ChatSection.tsx

@@ -1,10 +1,12 @@
+import { Divider } from "@chakra-ui/react";
 import { FormProvider, useForm } from "react-hook-form";
 import { getCachedChatForm, useCacheChatForm } from "src/hooks/chat/useCacheConfig";
 import { ChatConfigForm } from "src/types/Chat";
 
 import { ChatConfigSummary } from "./ChatConfigSummary";
 import { useChatContext } from "./ChatContext";
 import { ChatConversation } from "./ChatConversation";
+import { InferencePoweredBy } from "./InferencePoweredBy";
 
 export const ChatSection = ({ chatId }: { chatId: string }) => {
   const { modelInfos } = useChatContext();
@@ -25,6 +27,8 @@ export const ChatSection = ({ chatId }: { chatId: string }) => {
     <FormProvider {...form}>
       <ChatConversation chatId={chatId} />
       <ChatConfigSummary />
+      <Divider />
+      <InferencePoweredBy />
     </FormProvider>
   );
 };

website/src/components/Chat/InferencePoweredBy.tsx

@@ -0,0 +1,30 @@
+import { Grid, Heading } from "@chakra-ui/react";
+import { TeamMember } from "src/components/TeamMember";
+
+import data from "../../data/team.json";
+
+const SponsorGroup = ({ heading, members }) => {
+  const { people } = data;
+  return (
+    <>
+      <Heading size="sm" mt={3} mb={1}>
+        {heading}
+      </Heading>
+      <Grid gap="6" gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))">
+        {members.map((id) => {
+          const info = people[id] ?? {};
+          return <TeamMember {...info} key={id} />;
+        })}
+      </Grid>
+    </>
+  );
+};
+
+export const InferencePoweredBy = () => {
+  return (
+    <>
+      <SponsorGroup heading="Inference powered by" members={["hf", "stability"]} />
+      <SponsorGroup heading="Model training supported by" members={["redmond", "wandb"]} />
+    </>
+  );
+};

website/src/components/TeamMember.tsx

@@ -0,0 +1,31 @@
+import { Avatar, Badge, Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
+import { Github } from "lucide-react";
+import Link from "next/link";
+
+export interface TeamMemberProps {
+  name: string;
+  imageURL: string;
+  githubURL?: string;
+  title: string;
+}
+export function TeamMember({ name, imageURL, githubURL, title }: TeamMemberProps) {
+  const contributorBackgroundColor = useColorModeValue("gray.200", "gray.700");
+  return (
+    <Flex gap="1" bg={contributorBackgroundColor} borderRadius="md" p="2">
+      <Avatar src={imageURL} loading="lazy" name={name} />
+      <Box ml="3">
+        <Text fontWeight="bold">
+          {name}
+          {githubURL && (
+            <Badge ml="2" mb="0.5">
+              <Link href={githubURL} target="_default" rel="noreferrer" title="github">
+                <Github size={12} />
+              </Link>
+            </Badge>
+          )}
+        </Text>
+        <Text fontSize="sm">{title}</Text>
+      </Box>
+    </Flex>
+  );
+}

website/src/data/team.json

@@ -154,14 +154,20 @@
     },
     "hf": {
       "name": "Hugging Face",
-      "title": "Inference API Credits",
+      "title": "Inference API",
       "githubURL": "https://github.com/huggingface",
       "imageURL": "https://avatars.githubusercontent.com/u/25720743?s=200&v=4"
     },
     "redmond": {
       "name": "Redmond AI",
       "title": "Training Compute",
       "imageURL": "/images/logos/redmond_logo.jpg"
+    },
+    "stability": {
+      "name": "Stability AI",
+      "title": "Preemptible Compute (via LAION)",
+      "githubURL": "https://github.com/stability-ai",
+      "imageURL": "https://platform.stability.ai/assets/HexagonTextLong.4501db27.png"
     }
   },
   "groups": [
@@ -195,7 +201,7 @@
     },
     {
       "name": "Sponsors",
-      "members": ["redmond", "hf", "wandb"]
+      "members": ["redmond", "hf", "wandb", "stability"]
     },
     {
       "name": "And also...",

website/src/pages/team.tsx

@@ -1,28 +1,14 @@
 export { getServerSideProps } from "src/lib/defaultServerSideProps";
-import {
-  Avatar,
-  Badge,
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Grid,
-  Heading,
-  Stack,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-import { Github } from "lucide-react";
+import { Box, Card, CardBody, Grid, Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import React from "react";
+import { TeamMember } from "src/components/TeamMember";
 
 import data from "../data/team.json";
 
 const Team = () => {
   const cardBackgroundColor = useColorModeValue("gray.100", "gray.800");
-  const contributorBackgroundColor = useColorModeValue("gray.200", "gray.700");
   const { groups, people } = data;
   const { t } = useTranslation();
   return (
@@ -47,25 +33,7 @@ const Team = () => {
                   <Grid gap="6" gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))">
                     {group.members.map((id) => {
                       const info = people[id] ?? {};
-                      const { name, title, githubURL, imageURL } = info;
-                      return (
-                        <Flex key={id} gap="1" bg={contributorBackgroundColor} borderRadius="md" p="2">
-                          <Avatar src={imageURL} loading="lazy" name={name} />
-                          <Box ml="3">
-                            <Text fontWeight="bold">
-                              {name}
-                              {githubURL && (
-                                <Badge ml="2" mb="0.5">
-                                  <Link href={githubURL} target="_default" rel="noreferrer" title="github">
-                                    <Github size={12} />
-                                  </Link>
-                                </Badge>
-                              )}
-                            </Text>
-                            <Text fontSize="sm">{title}</Text>
-                          </Box>
-                        </Flex>
-                      );
+                      return <TeamMember {...info} key={id} />;
                     })}
                   </Grid>
                 </React.Fragment>