Updated docs

docs/docs/intro.md

@@ -9,16 +9,14 @@ import AddToYourProject from '@site/src/components/AddToYourProject';
 
 # Introduction
 
-Let's get started with **Ollama4j**.
-
-## 🦙 What is Ollama?
+### 🦙 What is Ollama?
 
 [Ollama](https://ollama.ai/) is an advanced AI tool that allows users to easily set up and run large language models
 locally (in CPU and GPU
 modes). With Ollama, users can leverage powerful language models such as Llama 2 and even customize and create their own
 models.
 
-## 👨‍💻 Why Ollama4j?
+### 👨‍💻 Why Ollama4j?
 
 Ollama4j was built for the simple purpose of integrating Ollama with Java applications.
 
@@ -39,16 +37,16 @@ Ollama4j was built for the simple purpose of integrating Ollama with Java applic
     end
 ```
 
-## Getting Started
+### Getting Started
 
-### What you'll need
+#### What you'll need
 
 - **[Ollama](https://ollama.ai/download)**
 - **[Oracle JDK](https://www.oracle.com/java/technologies/javase/jdk11-archive-downloads.html)** or
   **[Open JDK](https://jdk.java.net/archive/)** 11.0 or above.
 - **[Maven](https://maven.apache.org/download.cgi)**
 
-### Start Ollama server
+#### Start Ollama server
 
 The easiest way of getting started with Ollama server is with [Docker](https://docs.docker.com/get-started/overview/).
 But if you choose to run the
@@ -74,7 +72,7 @@ terminal of your code editor.
 
 The command runs the Ollama server locally at **http://localhost:11434/**.
 
-### Setup your project
+#### Setup your project
 
 Add the dependency to your project's `pom.xml`.
 
@@ -92,7 +90,6 @@ example,
 Use `slf4j-jdk14` implementation:
 
 ```xml
-
 <dependency>
     <groupId>org.slf4j</groupId>
     <artifactId>slf4j-jdk14</artifactId>
@@ -103,7 +100,6 @@ Use `slf4j-jdk14` implementation:
 or use `logback-classic` implementation:
 
 ```xml
-
 <dependency>
     <groupId>ch.qos.logback</groupId>
     <artifactId>logback-classic</artifactId>

docs/package-lock.json

@@ -20,7 +20,8 @@
                 "prism-react-renderer": "^2.3.0",
                 "react": "^18.0.0",
                 "react-dom": "^18.0.0",
-                "react-icons": "^5.5.0"
+                "react-icons": "^5.5.0",
+                "react-image-gallery": "^1.4.0"
             },
             "devDependencies": {
                 "@docusaurus/module-type-aliases": "^3.4.0",
@@ -13427,6 +13428,15 @@
                 "react": "*"
             }
         },
+        "node_modules/react-image-gallery": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.4.0.tgz",
+            "integrity": "sha512-m7xLq7+g6/xh+BhVMAxvRU0132sNcEFglYsVsgthrnItl9VtLE7MuVvVWD9pvzcI+WBP5+p9HvnRwIiyhPkBDg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

docs/package.json

@@ -26,7 +26,8 @@
         "prism-react-renderer": "^2.3.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "react-image-gallery": "^1.4.0"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.4.0",

docs/src/components/HomepageFeatures/index.js

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import Ollama4jUIImageCarousel from '@site/src/components/Ollama4jUIImageCarousel';
 
 const FeatureList = [
   {
@@ -161,6 +162,11 @@ export default function HomepageFeatures() {
           </div>
         </div>
       </section>
+      <section className={styles.features}>
+        <div className="container">
+          <Ollama4jUIImageCarousel></Ollama4jUIImageCarousel>
+        </div>
+      </section>
     </>
   );
 }

docs/src/components/Ollama4jUIImageCarousel/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import "react-image-gallery/styles/css/image-gallery.css";
+import ImageGallery from "react-image-gallery";
+
+const images = [
+    {
+        original: require('@site/static/img/ollama4j-ui/1.png').default,
+        thumbnail: require('@site/static/img/ollama4j-ui/1.png').default,
+    },
+    {
+        original: require('@site/static/img/ollama4j-ui/2.png').default,
+        thumbnail: require('@site/static/img/ollama4j-ui/2.png').default,
+    },
+    {
+        original: require('@site/static/img/ollama4j-ui/3.png').default,
+        thumbnail: require('@site/static/img/ollama4j-ui/3.png').default,
+    },
+    {
+        original: require('@site/static/img/ollama4j-ui/4.png').default,
+        thumbnail: require('@site/static/img/ollama4j-ui/4.png').default,
+    },
+];
+
+class Ollama4jUIImageCarousel extends React.Component {
+    render() {
+      return (
+        <div style={{ width: '50%', margin: '0 auto' }}>
+            <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+                <h2>Explore the stuff we have built with Ollama4j</h2>
+                <h4>
+                    <a href="https://github.com/ollama4j/ollama4j-ui" target='_blank'>
+                        Ollama4j UI - Desktop UI built in Java with Swing
+                    </a>
+                </h4>
+            </div>
+          <ImageGallery items={images} />
+        </div>
+      );
+    }
+}
+
+export default Ollama4jUIImageCarousel;