From b9519c3aacfbe2d552eeb8fec8c6d08b826ce08c Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Tue, 14 Jan 2025 10:25:30 -0500
Subject: [PATCH] new logo
---
README.md | 4 +-
src/renderer/components/Shared/HexLogo.tsx | 40 +++++
src/renderer/components/Welcome.tsx | 175 ++++++++++-----------
src/renderer/img/flask.svg | 25 ---
src/renderer/img/hex.svg | 32 ++++
5 files changed, 157 insertions(+), 119 deletions(-)
create mode 100644 src/renderer/components/Shared/HexLogo.tsx
delete mode 100644 src/renderer/img/flask.svg
create mode 100644 src/renderer/img/hex.svg
diff --git a/README.md b/README.md
index 6ad48cd0..56a45ceb 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,10 @@
<br />
<div align="center">
<a href="https://github.com/transformerlab/transformerlab-app">
- <img src="https://transformerlab.ai/img/flask.svg" alt="Logo" width="80" height="80">
+ <img src="https://transformerlab.ai/img/logo2.svg" alt="Logo" width="80" height="80">
</a>
- <h1 align="center" style="color: rgb(68, 73, 80); letter-spacing: -1px">Transformer Lab</h1>
+ <h1 align="center" style="color: rgb(16, 16, 18); letter-spacing: -1px">Transformer Lab</h1>
<p align="center">
Download, interact, and finetune models locally.
diff --git a/src/renderer/components/Shared/HexLogo.tsx b/src/renderer/components/Shared/HexLogo.tsx
new file mode 100644
index 00000000..2705d722
--- /dev/null
+++ b/src/renderer/components/Shared/HexLogo.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+const HexLogo = ({ width = 128, height = 128 }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ id="svg1"
+ width={width}
+ height={height}
+ version="1.1"
+ viewBox="0 0 33.867 38.741"
+ >
+ <g id="layer1" transform="translate(-91.546 -129.117)">
+ <g
+ id="g2"
+ fill="#fff"
+ stroke="#000"
+ strokeDasharray="none"
+ strokeDashoffset="0"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ transform="translate(44.593 -105.581)"
+ >
+ <path
+ id="path33"
+ strokeWidth="2.117"
+ d="M260.882 330.486v18.256m-15.843-27.44 15.81 9.128m-31.685 0 15.81-9.128m-15.842 27.44v-18.256m15.842 27.44-15.81-9.128m31.685 0-15.81 9.128"
+ transform="translate(-181.12 -85.545)"
+ ></path>
+ <path
+ id="path1-7"
+ strokeWidth="1.852"
+ d="M245.007 330.486v18.256m7.937-18.256v18.256m-15.842-13.692 15.81 9.128m-11.842-16.002 15.81 9.128m-19.778 6.874 15.81-9.128m-19.78 2.254 15.811-9.128m-3.936 20.566v-18.256m-7.938 18.256v-18.256m15.843 13.692-15.81-9.128m11.841 16.002-15.81-9.128m19.779-6.874-15.81 9.128m19.779-2.254-15.81 9.128"
+ transform="translate(-181.12 -85.545)"
+ ></path>
+ </g>
+ </g>
+ </svg>
+);
+
+export default HexLogo;
diff --git a/src/renderer/components/Welcome.tsx b/src/renderer/components/Welcome.tsx
index 792cd60d..5b3f4251 100644
--- a/src/renderer/components/Welcome.tsx
+++ b/src/renderer/components/Welcome.tsx
@@ -5,7 +5,6 @@ import { Button, Sheet, Stack, Typography } from '@mui/joy';
import labImage from '../img/lab.jpg';
-import flaskLogo from '../img/flask.png';
import {
ArrowRightCircleIcon,
BoxesIcon,
@@ -20,16 +19,7 @@ import { useServerStats } from 'renderer/lib/transformerlab-api-sdk';
import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
import DownloadFirstModelModal from './DownloadFirstModelModal';
-
-function LogoComponent() {
- return (
- <img
- src={flaskLogo}
- width="38"
- style={{ verticalAlign: 'middle', marginBottom: '10px' }}
- />
- );
-}
+import HexLogo from './Shared/HexLogo';
function recommendedModel(cpu, os, device) {
if (!cpu || !os || !device) return '';
@@ -57,7 +47,8 @@ function typeOfComputer(cpu, os, device) {
}
export default function Welcome() {
- const [ modelDownloadModalOpen, setModelDownloadModalOpen ] = useState<boolean>(false);
+ const [modelDownloadModalOpen, setModelDownloadModalOpen] =
+ useState<boolean>(false);
const { server, isLoading, isError } = useServerStats();
@@ -69,74 +60,75 @@ export default function Welcome() {
return (
<>
-
- <DownloadFirstModelModal
+ <DownloadFirstModelModal
open={modelDownloadModalOpen}
setOpen={setModelDownloadModalOpen}
server={server}
- />
-
- <Sheet
- sx={{
- overflow: 'hidden',
- height: 'calc(100% - 1em)',
- backgroundImage: `url("${labImage}")`,
- backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'flex-end',
- gap: 3,
- }}
- >
- <div
- style={{
- backgroundColor: 'var(--joy-palette-background-surface)',
- opacity: '0.85',
- padding: '2rem',
+ />
+
+ <Sheet
+ sx={{
+ overflow: 'hidden',
+ height: 'calc(100% - 1em)',
+ backgroundImage: `url("${labImage}")`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'cover',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+ gap: 3,
}}
>
- <Typography level="h1" color="neutral">
- <LogoComponent />
- Transformer Lab
- </Typography>
- <Typography level="h1" sx={{ fontSize: '48px' }} mb={2}>
- Let's start your next Experiment! 🤓
- </Typography>
- <div>
- <Typography level="body-lg" sx={{ fontSize: '24px' }} mb={2}>
- Get started by downloading a small model from the <BoxesIcon />{' '}
- Model Zoo. <b>{recommendedModel(cpu, os, device)}</b> could be a
- great starting point for your {typeOfComputer(cpu, os, device)}.
- After downloading a model, you can:
- </Typography>
- <Stack
- direction="column"
- justifyContent="flex-start"
- alignItems="flex-start"
- spacing={2}
+ <div
+ style={{
+ backgroundColor: 'var(--joy-palette-background-surface)',
+ opacity: '0.85',
+ padding: '2rem',
+ }}
+ >
+ <Typography
+ level="h1"
+ sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
- <ul>
- <li>
- <Typography level="body-lg" sx={{ fontSize: '20px' }}>
- <b>Run it</b> by clicking on <LayersIcon /> Foundation then
- press <PlayCircleIcon /> Run{' '}
- </Typography>
- </li>
- <li>
- <Typography level="body-lg" sx={{ fontSize: '20px' }}>
- Once a model is running, you can <b>Chat</b> with it by
- clicking on <MessageCircleIcon /> Interact
- </Typography>
- </li>
- <li>
- <Typography level="body-lg" sx={{ fontSize: '20px' }}>
- <b>Fine tune</b> a model by clicking on <GraduationCapIcon />{' '}
- Train
- </Typography>
- </li>
- </ul>
- {/* <Button
+ <HexLogo width={40} height={40} /> Transformer Lab
+ </Typography>
+ <Typography level="h1" sx={{ fontSize: '48px' }} mb={2}>
+ Let's start your next Experiment! 🤓
+ </Typography>
+ <div>
+ <Typography level="body-lg" sx={{ fontSize: '24px' }} mb={2}>
+ Get started by downloading a small model from the <BoxesIcon />{' '}
+ Model Zoo. <b>{recommendedModel(cpu, os, device)}</b> could be a
+ great starting point for your {typeOfComputer(cpu, os, device)}.
+ After downloading a model, you can:
+ </Typography>
+ <Stack
+ direction="column"
+ justifyContent="flex-start"
+ alignItems="flex-start"
+ spacing={2}
+ >
+ <ul>
+ <li>
+ <Typography level="body-lg" sx={{ fontSize: '20px' }}>
+ <b>Run it</b> by clicking on <LayersIcon /> Foundation then
+ press <PlayCircleIcon /> Run{' '}
+ </Typography>
+ </li>
+ <li>
+ <Typography level="body-lg" sx={{ fontSize: '20px' }}>
+ Once a model is running, you can <b>Chat</b> with it by
+ clicking on <MessageCircleIcon /> Interact
+ </Typography>
+ </li>
+ <li>
+ <Typography level="body-lg" sx={{ fontSize: '20px' }}>
+ <b>Fine tune</b> a model by clicking on{' '}
+ <GraduationCapIcon /> Train
+ </Typography>
+ </li>
+ </ul>
+ {/* <Button
endDecorator={<ArrowRightCircleIcon />}
size="lg"
onClick={() => {
@@ -145,31 +137,30 @@ export default function Welcome() {
>
Chat 💬 with it
</Button> */}
- {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
+ {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
Start 🔬 with a pre-built recipe
</Button> */}
- {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
+ {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
Train 🧑ðŸ½â€ðŸŽ“ a new model from scratch
</Button> */}
- {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
+ {/* <Button endDecorator={<ArrowRightCircleIcon />} size="lg">
Fine tune 🎵 it
</Button> */}
- </Stack>
- <Typography level="body-lg" mt={2} sx={{ fontSize: '24px' }}>
- Watch our{' '}
- <a href="https://transformerlab.ai/docs/intro" target="_blank">
- Getting Started Video
- </a>
- , or access our{' '}
- <a href="https://transformerlab.ai/docs/intro" target="_blank">
- full documentation
- </a>{' '}
- for more ideas!
- </Typography>
+ </Stack>
+ <Typography level="body-lg" mt={2} sx={{ fontSize: '24px' }}>
+ Watch our{' '}
+ <a href="https://transformerlab.ai/docs/intro" target="_blank">
+ Getting Started Video
+ </a>
+ , or access our{' '}
+ <a href="https://transformerlab.ai/docs/intro" target="_blank">
+ full documentation
+ </a>{' '}
+ for more ideas!
+ </Typography>
+ </div>
</div>
- </div>
- </Sheet>
-
+ </Sheet>
</>
);
}
diff --git a/src/renderer/img/flask.svg b/src/renderer/img/flask.svg
deleted file mode 100644
index 01827105..00000000
--- a/src/renderer/img/flask.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Created with Vectornator (http://vectornator.io/) -->
-<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 1024 1024" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:vectornator="http://vectornator.io" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-<path d="M358.396 69.294C351.126 69.294 345.228 75.1924 345.228 82.4622L345.228 99.9687C345.228 107.239 351.126 113.137 358.396 113.137L423.661 113.137C430.931 113.137 436.83 119.035 436.83 126.305L436.83 291.312C291.854 325.334 183.83 455.144 183.83 610.498C183.83 786.23 321.891 929.703 495.492 938.284C500.958 938.561 506.465 938.706 512 938.706C512.554 938.706 513.098 938.67 513.651 938.668C518.627 938.642 523.588 938.533 528.508 938.284C533.973 938.012 539.395 937.591 544.786 937.055C710.628 920.581 840.17 780.672 840.17 610.498C840.17 455.144 732.107 325.334 587.132 291.312L587.132 126.305C587.132 119.035 592.992 113.137 600.262 113.137L665.604 113.137C672.874 113.137 678.772 107.239 678.772 99.9687L678.772 82.4622C678.772 75.1924 672.874 69.294 665.604 69.294L358.396 69.294Z" id="Fill"/>
-<filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1023.41" id="Filter" width="810.34" x="106.83" y="-1.70603">
-<feDropShadow dx="3.67394e-16" dy="6" flood-color="#414141" flood-opacity="0.6" in="SourceGraphic" result="Shadow" stdDeviation="8"/>
-</filter>
-</defs>
-<clipPath id="ArtboardFrame">
-<rect height="1024" width="1024" x="0" y="0"/>
-</clipPath>
-<g clip-path="url(#ArtboardFrame)" id="Layer-4" vectornator:layerName="Layer 4">
-<g filter="url(#Filter)" vectornator:layerName="Curve 2" vectornator:shadowAngle="1.5708" vectornator:shadowColor="#414141" vectornator:shadowOffset="6" vectornator:shadowOpacity="0.6" vectornator:shadowRadius="16">
-<use fill="#ffffff" fill-rule="nonzero" stroke="none" xlink:href="#Fill"/>
-<mask height="983.412" id="StrokeMask" maskUnits="userSpaceOnUse" width="770.34" x="126.83" y="12.294">
-<rect fill="#ffffff" height="983.412" stroke="none" width="770.34" x="126.83" y="12.294"/>
-<use fill="#000000" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
-</mask>
-<use fill="none" mask="url(#StrokeMask)" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="round" stroke-width="114" xlink:href="#Fill"/>
-</g>
-<path d="M358.381 69.3043C351.111 69.3043 345.22 75.1952 345.22 82.465L345.22 99.9645C345.22 107.234 351.111 113.125 358.381 113.125L423.664 113.125C430.934 113.125 436.825 119.016 436.825 126.286L436.825 291.302C291.849 325.324 183.82 455.133 183.82 610.487C183.82 791.741 330.716 938.696 511.971 938.696C693.226 938.696 840.18 791.741 840.18 610.487C840.18 455.133 732.093 325.324 587.118 291.302L587.118 126.286C587.118 119.016 593.009 113.125 600.278 113.125L665.619 113.125C672.889 113.125 678.78 107.234 678.78 99.9645L678.78 82.465C678.78 75.1952 672.889 69.3043 665.619 69.3043L358.381 69.3043ZM771.137 510.841C773.952 517.84 776.5 524.989 778.773 532.245C787.106 558.846 791.673 587.093 791.673 616.445C791.674 772.964 664.816 899.879 508.298 899.879C385.999 899.879 282.108 822.243 242.392 713.69C299.616 641.115 357.925 603.1 429.478 599.698C511.94 595.776 594.459 655.922 661.281 635.651C745.979 609.957 771.137 510.841 771.137 510.841Z" fill="#905bc1" fill-rule="nonzero" opacity="1" stroke="none" vectornator:layerName="Curve 1"/>
-</g>
-</svg>
diff --git a/src/renderer/img/hex.svg b/src/renderer/img/hex.svg
new file mode 100644
index 00000000..647548fa
--- /dev/null
+++ b/src/renderer/img/hex.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="33.866669mm"
+ height="38.741112mm"
+ viewBox="0 0 33.866669 38.741112"
+ version="1.1"
+ id="svg1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <g
+ id="layer1"
+ transform="translate(-91.545824,-129.11667)">
+ <g
+ id="g2"
+ transform="translate(44.593277,-105.58143)">
+ <path
+ id="path33"
+ style="fill:#ffffff;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0"
+ transform="translate(-181.12086,-85.545272)"
+ d="m 260.88176,330.4858 v 18.25625 m -15.84268,-27.44034 15.81037,9.12812 m -31.68537,0 15.81037,-9.12813 m -15.8427,27.44034 v -18.25625 m 15.84268,27.44034 -15.81037,-9.12812 m 31.68537,0 -15.81037,9.12813" />
+ <path
+ id="path1-7"
+ style="fill:#ffffff;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0"
+ transform="translate(-181.12086,-85.545272)"
+ d="m 245.00676,330.4858 v 18.25625 m 7.9375,-18.25625 v 18.25625 m -15.84268,-13.69219 15.81037,9.12813 m -11.84162,-16.00221 15.81037,9.12813 m -19.77912,6.87407 15.81037,-9.12812 m -19.77912,2.25404 15.81037,-9.12812 m -3.93645,20.56626 v -18.25625 m -7.9375,18.25625 v -18.25625 m 15.84268,13.69219 -15.81037,-9.12813 m 11.84162,16.00221 -15.81037,-9.12813 m 19.77912,-6.87407 -15.81037,9.12812 m 19.77912,-2.25404 -15.81037,9.12812" />
+ </g>
+ </g>
+</svg>
--
GitLab