From cbcde682ef710a215a008182c359abf4ed26d6f3 Mon Sep 17 00:00:00 2001 From: Sonatai Date: Fri, 28 Apr 2023 12:07:27 +0200 Subject: [PATCH 1/6] add all the content, design headlines + icons --- src/App.tsx | 12 +- .../LoadingSpinner/LoadingSpinner.tsx | 4 +- src/components/LoadingSpinner/styles.css | 4 +- src/components/shared/Layout/Layout.tsx | 2 +- src/components/shared/Tab/CustomTab.tsx | 38 ++++ src/index.css | 2 +- src/pages/Home.tsx | 190 ++++++++++++++++++ src/pages/Start.tsx | 103 ---------- src/pages/styles.scss | 0 9 files changed, 236 insertions(+), 119 deletions(-) create mode 100644 src/components/shared/Tab/CustomTab.tsx create mode 100644 src/pages/Home.tsx delete mode 100644 src/pages/Start.tsx create mode 100644 src/pages/styles.scss diff --git a/src/App.tsx b/src/App.tsx index 28349f1..cd2e3c8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,15 +5,7 @@ import { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner'; import { Search } from './components/Search/Search'; import { useGetSummary } from './Hooks/useGetSummary'; import { Document } from './pages/Document'; -import { Start } from './pages/Start'; - -/* -#ff3f81 -#23153c -#121417 -#1E293B -#F5D547 -*/ +import { Home } from './pages/Home'; export const App = (): JSX.Element => { const { data: summary, isLoading, isError } = useGetSummary(); @@ -55,7 +47,7 @@ export const App = (): JSX.Element => { )} - } /> + } /> {summary?.specifications.map((spec) => ( { <> {isLoading && (
-
+
diff --git a/src/components/LoadingSpinner/styles.css b/src/components/LoadingSpinner/styles.css index 743238a..1d96270 100644 --- a/src/components/LoadingSpinner/styles.css +++ b/src/components/LoadingSpinner/styles.css @@ -8,13 +8,13 @@ @apply bg-davysGray/[0.5]; } -.text-center { +.text--center { @apply flex; @apply justify-around; @apply items-center; @apply h-full; } -.spinner-border { +.spinner__border { @apply text-redNcs/[0.7] text-[8rem]; } diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx index 1778011..aa84e35 100644 --- a/src/components/shared/Layout/Layout.tsx +++ b/src/components/shared/Layout/Layout.tsx @@ -15,7 +15,7 @@ export const Layout = (props: PropsWithChildren): JSX.Element => { return (
-
+
{children} {hasOnPageNav !== undefined && hasOnPageNav && ( diff --git a/src/components/shared/Tab/CustomTab.tsx b/src/components/shared/Tab/CustomTab.tsx new file mode 100644 index 0000000..517b9d8 --- /dev/null +++ b/src/components/shared/Tab/CustomTab.tsx @@ -0,0 +1,38 @@ +import { ReactNode } from 'react'; +import { Tab, TabList, TabPanel, useTabState } from 'reakit'; + +interface ITab { + content: ReactNode; + header: string; +} + +interface ICustomTab { + tabConfigs: ITab[]; +} + +export const CustomTab = (props: ICustomTab) => { + const { tabConfigs } = props; + + const tab = useTabState(); + + return ( + <> + + {tabConfigs.map((tabConfig) => ( + + {tabConfig.header} + + ))} + + {tabConfigs.map((tabConfig) => ( + + {tab.selectedId === tabConfig.header && tabConfig.content} + + ))} + + ); +}; diff --git a/src/index.css b/src/index.css index f1ba854..724167f 100644 --- a/src/index.css +++ b/src/index.css @@ -49,7 +49,7 @@ h6 { } h1 { - @apply text-2xl; + @apply text-3xl; @apply mb-12; } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..103f308 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,190 @@ +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'; + +import { + faComputer, + faFileExport, + faWandSparkles, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { Layout } from '../components/shared/Layout/Layout'; +import { CustomTab } from '../components/shared/Tab/CustomTab'; +import { useScrollUp } from '../Hooks/useScrollUp'; + +const groovySnippet = { + content: ( + + {`var x = Tsr.of(3d).setRqsGradient(true)\nvar b = Tsr.of(-4d)\nvar w =Tsr.of(2d)\nvar y = ((x+b)*w)**2 y.backward(1)\n// x.getGradient(): "(1):[-8]"`} + + ), + header: 'Groovy', +}; + +const JavaSnippet = { + content: ( + + {`var x = Tsr.of(3d).setRqsGradient(true)\nvar b = Tsr.of(-4d);\nvar w = Tsr.of(2d);\nvar y = Tsr.of("((i0+i1)*i2)^2", x, b, w);\ny.backward(1);\n// x.getGradient(): "(1):[-8]"`} + + ), + header: 'Java', +}; + +const KotlinSnippet = { + content: ( + + {`val x = Tsr.of(3.0).setRqsGradient(true)\nval b = Tsr.of(-4.0)\nval w = Tsr.of(2.0)\nval y = Tsr.of("((i0+i1)*i2)^2", x, b, w)\ny.backward(1.0)\n// x.getGradient(): "(1):[-8]"`} + + ), + header: 'Kotlin', +}; + +export const Home = (): JSX.Element => { + useScrollUp(); + + return ( + +

Neureka

+

+ A lightweight open source platform independent nd-array library + for the JVM +

+ +
+
+
+ +
+
+ Platform independent, extendable and compatible with any + JVM language +
+
+
+
+ +
+
+ Completely open-source and free to use, MIT-Licenced +
+
+
+
+ +
+
+ Vendor agnostic GPU acceleration through OpenCl +
+
+
+ +

Why Neureka?

+

+ Not only is it a flexible nd-array library for general purpose + use, but also a tensor library for doing deep learning. +

+

+ Neureka trains your neural network using a computation graph + recorder. This is contrary to the approaches found in other + frameworks such as TensorFlow, Theano, Caffe, and CNTK which + require the definition of a computation graph ahead of time. +

+
+ +

+ In that case a developer has to build a neural network + structure which cannot change during runtime. Neureka on the + other hand uses the recorded computation graph in order to + apply a technique called reverse-mode auto-differentiation. + This technique allows your network structure to change + during runtime arbitrarily with zero lag or overhead. This + powerful feature was inspired by PyTorch which also uses a + dynamic computation graph to achieve such a high degree of + flexibility. +

+
+ +

Why Java?

+

+ Although Java is a robust and safe language, it is often times + considered to be too verbose and explicit for simple prototyping + or more explorative workloads... Therefore popular machine + learning and tensor / deep learning libraries rely on python, + which in many cases offers a more concise syntax. So one might + come to wonder, why would anybody ever build a deep learning + library for Java? The answer is simple! +

+

+ Nobody did! This library was written for all JVM-languages, + namely: Groovy, Kotlin, Scala, and Jython just to name a few. + Take a look at the following examples side by side! Neureka can + be integrated by any language which compiles to, or understands + JVM bytecode! +

+ +
+ Both code snippets express the following equations +
    +
  • f(x) = ((x-4)*2)^2 | f(3) = 4
    • +
  • f(x)' = 8 * x - 32 | f(3)' = -8
    • +
+
+

+ Neurekas API is designed to enable operator overloading in + certain languages based on carefully chosen method names which + will be translated to operators. This makes it possible to use + tensors in mathematical expression in both Groovy and Kotlin to + allow for rapid prototyping and highly readable math heavy + code... +

+
    +
  • + : plus(...)
    • +
  • - : minus(...)
    • +
  • * : times(...)
    • +
  • / : divide(...)
    • +
  • ...
    • +
+

+ If you prefer fast prototyping with Jupyter, then Neureka can be + used there too. BeakerX is a + jupyter extension that supports many JVM languages like Groovy, + Scala, Clojure, Kotlin and Java. +

+ +

Performance

+

+ Not only are the operations within the default backend + implemented as generalized, modular and concise as possible, + they are also optimized for multi-threading and specifically + designed to be auto-vectorizable by the JVM into SIMD machine + code instructions. However performance wise Neureka still has + lots of room for improvement, but because it is a lightweight + and highly extensible library with a consistent API designed to + allow for the support of any backend, you can easily go the + extra mile to improve performance for your specific use case. + like for example implementing a more specialized kind of OpenCL + kernel for convolution... Currently Neureka is mostly held back + by the JVM's lack of allowing for more memory localized types + and also a lack of an API for consistent SIMD vectorization.{' '} + + (...take a look at the upcoming vector API...) + {' '} + This upcoming vector API alongside the introduction of + inline/value types from Project-Valhalla will greatly benefit + the performance of Neureka as well as improve Machine Learning + on the JVM in general. +

+ + ); +}; diff --git a/src/pages/Start.tsx b/src/pages/Start.tsx deleted file mode 100644 index 58a32d3..0000000 --- a/src/pages/Start.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { Layout } from '../components/shared/Layout/Layout'; -import { useScrollUp } from '../Hooks/useScrollUp'; - -export const Start = (): JSX.Element => { - useScrollUp(); - - return ( - -

Main Content

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum - dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus - est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea - rebum. Stet clita kasd gubergren, no sea takimata sanctus est - Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in - hendrerit in vulputate velit esse molestie consequat, vel illum - dolore eu feugiat nulla facilisis at vero eros et accumsan et - iusto odio dignissim qui blandit praesent luptatum zzril delenit - augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor - sit amet, -

-
-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum - dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus - est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea - rebum. Stet clita kasd gubergren, no sea takimata sanctus est - Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in - hendrerit in vulputate velit esse molestie consequat, vel illum - dolore eu feugiat nulla facilisis at vero eros et accumsan et - iusto odio dignissim qui blandit praesent luptatum zzril delenit - augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor - sit amet, -

-
-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum - dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus - est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea - rebum. Stet clita kasd gubergren, no sea takimata sanctus est - Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in - hendrerit in vulputate velit esse molestie consequat, vel illum - dolore eu feugiat nulla facilisis at vero eros et accumsan et - iusto odio dignissim qui blandit praesent luptatum zzril delenit - augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor - sit amet, -

-
-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum - dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus - est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea - rebum. Stet clita kasd gubergren, no sea takimata sanctus est - Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in - hendrerit in vulputate velit esse molestie consequat, vel illum - dolore eu feugiat nulla facilisis at vero eros et accumsan et - iusto odio dignissim qui blandit praesent luptatum zzril delenit - augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor - sit amet, -

- - ); -}; diff --git a/src/pages/styles.scss b/src/pages/styles.scss new file mode 100644 index 0000000..e69de29 From 6d5003baf546ae0b9b22753a8a5c128071021add Mon Sep 17 00:00:00 2001 From: Sonatai Date: Fri, 28 Apr 2023 12:46:54 +0200 Subject: [PATCH 2/6] tab componente gestyled --- src/components/shared/Tab/CustomTab.tsx | 30 ++++++++++++++++--------- src/pages/Home.tsx | 21 ++++++++++------- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/components/shared/Tab/CustomTab.tsx b/src/components/shared/Tab/CustomTab.tsx index 517b9d8..34d0886 100644 --- a/src/components/shared/Tab/CustomTab.tsx +++ b/src/components/shared/Tab/CustomTab.tsx @@ -16,23 +16,31 @@ export const CustomTab = (props: ICustomTab) => { const tab = useTabState(); return ( - <> +
- {tabConfigs.map((tabConfig) => ( - - {tabConfig.header} - - ))} +
+ {tabConfigs.map((tabConfig) => ( + + {tabConfig.header} + + ))} +
+ {tabConfigs.map((tabConfig) => ( {tab.selectedId === tabConfig.header && tabConfig.content} ))} - +
); }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 103f308..3d2ffb2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -99,7 +99,11 @@ export const Home = (): JSX.Element => { require the definition of a computation graph ahead of time.

- + archimedes

In that case a developer has to build a neural network structure which cannot change during runtime. Neureka on the @@ -114,7 +118,7 @@ export const Home = (): JSX.Element => {

Why Java?

-

+

Although Java is a robust and safe language, it is often times considered to be too verbose and explicit for simple prototyping or more explorative workloads... Therefore popular machine @@ -123,12 +127,13 @@ export const Home = (): JSX.Element => { come to wonder, why would anybody ever build a deep learning library for Java? The answer is simple!

-

- Nobody did! This library was written for all JVM-languages, - namely: Groovy, Kotlin, Scala, and Jython just to name a few. - Take a look at the following examples side by side! Neureka can - be integrated by any language which compiles to, or understands - JVM bytecode! + +

Nobody did!

+

+ This library was written for all JVM-languages, namely: Groovy, + Kotlin, Scala, and Jython just to name a few. Take a look at the + following examples side by side! Neureka can be integrated by + any language which compiles to, or understands JVM bytecode!

Date: Fri, 28 Apr 2023 13:09:41 +0200 Subject: [PATCH 3/6] fix contrast problem with tabs --- src/components/shared/Tab/CustomTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/Tab/CustomTab.tsx b/src/components/shared/Tab/CustomTab.tsx index 34d0886..8b79df3 100644 --- a/src/components/shared/Tab/CustomTab.tsx +++ b/src/components/shared/Tab/CustomTab.tsx @@ -26,7 +26,7 @@ export const CustomTab = (props: ICustomTab) => { {...tab} className={`p-2 mr-2 ${ tab.selectedId === tabConfig.header - ? 'border-t-4 border-claret border-solid bg-eerieBlack text-redNcs' + ? 'border-t-4 border-claret border-solid bg-eerieBlack text-frenchRose font-semibold' : '' } `} > From 1ff680d00bf918969039036b3234b885fa68e4e1 Mon Sep 17 00:00:00 2001 From: Sonatai Date: Fri, 28 Apr 2023 13:25:45 +0200 Subject: [PATCH 4/6] style list and paragraphs --- src/index.css | 4 +++ src/pages/Home.tsx | 57 ++++++++++++++++++++++++++----------------- src/pages/styles.css | 8 ++++++ src/pages/styles.scss | 0 4 files changed, 47 insertions(+), 22 deletions(-) create mode 100644 src/pages/styles.css delete mode 100644 src/pages/styles.scss diff --git a/src/index.css b/src/index.css index 724167f..c25c8b3 100644 --- a/src/index.css +++ b/src/index.css @@ -70,3 +70,7 @@ h6 { @apply font-medium; @apply mb-4; } + +p { + @apply mb-4; +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 3d2ffb2..2568917 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -11,6 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Layout } from '../components/shared/Layout/Layout'; import { CustomTab } from '../components/shared/Tab/CustomTab'; import { useScrollUp } from '../Hooks/useScrollUp'; +import './styles.css'; const groovySnippet = { content: ( @@ -88,7 +89,7 @@ export const Home = (): JSX.Element => {

Why Neureka?

-

+

Not only is it a flexible nd-array library for general purpose use, but also a tensor library for doing deep learning.

@@ -98,7 +99,7 @@ export const Home = (): JSX.Element => { frameworks such as TensorFlow, Theano, Caffe, and CNTK which require the definition of a computation graph ahead of time.

-
+
archimedes {

Why Java?

-

+

Although Java is a robust and safe language, it is often times considered to be too verbose and explicit for simple prototyping or more explorative workloads... Therefore popular machine @@ -140,9 +141,13 @@ export const Home = (): JSX.Element => { />

Both code snippets express the following equations -
    -
  • f(x) = ((x-4)*2)^2 | f(3) = 4
    • -
  • f(x)' = 8 * x - 32 | f(3)' = -8
    • +
      +
    • + f(x) = ((x-4)*2)^2 | f(3) = 4 +
      • +
    • + f(x)' = 8 * x - 32 | f(3)' = -8 +

@@ -153,12 +158,12 @@ export const Home = (): JSX.Element => { allow for rapid prototyping and highly readable math heavy code...

-