Forem: Abhishek2010DevSingh

RustyChat

Abhishek2010DevSingh — Sat, 14 Dec 2024 05:51:20 +0000

Rusty Chat

Welcome to Rusty Chat, a full-stack web application built using the Leptos web framework, Axum backend, and Tokio for asynchronous operations. The app integrates a local AI language model using Ollama to offer intelligent chat responses. This project is designed for developers interested in building performant, real-time chat applications with a modern Rust stack.

Features

Real-time Chat: 💬 Leverage Http Stream to enable seamless real-time chat functionality.
AI-Powered Chat: 🤖 Integrate Ollama to run local AI models for enhanced chat responses.
Full-Stack Development: 🌐 Leptos is used for both the frontend and backend, with Axum as the backend server.
Async Framework: ⚡ Tokio is used for handling asynchronous tasks efficiently.
TailwindCSS: 🎨 Beautiful, responsive UI powered by TailwindCSS.
WebAssembly: 🕹️ Support for WebAssembly (WASM) for better performance in the browser.

Demo

🎥 Demo Video

You can watch the demo of Rusty Chat here:

Project Setup

Prerequisites

To get started with Rusty Chat, you'll need the following tools installed:

Rust (Nightly version): Install Rust through rustup.
Node.js & npm: Required for managing frontend dependencies and building assets.
cargo-leptos: Install this tool to manage Leptos-specific tasks.

Install cargo-leptos with the following command:

cargo install cargo-leptos --locked

Clone the Repository

Clone the project to your local machine:

git clone https://github.com/Abhishek2010DevSingh/RustyChat
cd RustyChat

Install Dependencies

Install the required dependencies using Cargo:

cargo build

For frontend assets, you can install the necessary npm packages by running:

npm install

Development Environment

Start the development server with the following command:

cargo leptos watch

This will compile the Rust backend and the frontend assets, then serve the application locally.

By default, the app will be hosted at 127.0.0.1:3000.

Running the Application with TailwindCSS

Rusty Chat uses TailwindCSS for styling. Make sure the tailwind-input-file is set to "style/main.css" in your Cargo.toml file. You can customize the styles according to your needs.

To start the build process for the frontend assets, run the following:

npm run build

Running the Application with AI Support

If you want to use the AI chat functionality with Ollama, make sure you have Ollama installed and set up locally.

cargo leptos watch --features "ssr"

This enables server-side rendering (SSR) along with Ollama's local AI model integration.

Testing the Application

Rusty Chat includes end-to-end testing with Playwright. You can run tests using the following command:

cargo leptos end-to-end

To run the tests in release mode:

cargo leptos end-to-end --release

Building for Production

For a production build, use the following command:

cargo leptos build --release

This will compile both the backend and the frontend assets and prepare them for deployment.

Deploying

After building for release, you can deploy the compiled server and the static site to your production server.

Copy the following files from the target directory to your server:

Server binary: Located at target/server/release
Site package: Located at target/site

Set up the environment variables for your project:

LEPTOS_OUTPUT_NAME="rusty-chat"
LEPTOS_SITE_ROOT="site"
LEPTOS_SITE_PKG_DIR="pkg"
LEPTOS_SITE_ADDR="127.0.0.1:3000"
LEPTOS_RELOAD_PORT="3001"

Finally, run the server binary:

./target/server/release/rusty-chat

Development with WebAssembly (WASM)

If you plan to run the app with WebAssembly, make sure the wasm32-unknown-unknown target is added:

rustup target add wasm32-unknown-unknown

You can then build the app for WebAssembly by running:

cargo leptos build --target wasm32-unknown-unknown

Iconography

The app's design uses modern icons and clean UI elements that align with current web design trends. Custom icons are integrated into the app for a unique look and feel. Here's a small preview:

Chat bubble: 💬
AI-powered: 🤖
Real-time: ⚡
TailwindCSS: 🎨

Support

If you encounter any issues or need help, feel free to open an issue on the GitHub repository.

Conclusion

Rusty Chat is a full-stack, real-time web chat app built with cutting-edge technologies in Rust. With features like local AI integration, real-time messaging, and full-stack development using Leptos and Axum, it provides a modern and efficient platform for building chat applications.

We hope this template helps you get started with your next full-stack web project!

Happy coding! 🎉

ASCII Art Code in Rust

Abhishek2010DevSingh — Sat, 24 Aug 2024 12:51:29 +0000

Hi, everyone! I'm Abhishek, a 13-year-old tech enthusiast who loves exploring all things creative and coding. Today, I'm excited to share something that's both artistic and geeky—ASCII art! ASCII art is a way of creating images using characters from the ASCII standard. It's an awesome way to express creativity using just your keyboard.

In this post, I'll be diving into the world of ASCII art, sharing some cool examples, and showing you how you can create your own. Whether you're a beginner or a seasoned artist, there's something for everyone. Let's get started on this fun journey of turning text into masterpieces!

Let create a new project:

Cargo new ascii_art

Let’s get to the main point. The following are the dependencies:

[dependencies]
clap = { version = "4.5.8", features = ["derive"] }
image = "0.24.9"

Explanations:

clap: This dependency is for the clap crate, which is used for command-line argument parsing. The derive feature allows you to use clap's derive macros to simplify the process of defining command-line arguments.
image : This dependency is for the image crate, which provides functionality for image processing. In your ASCII art app, this crate might be used to handle image files, which you can then convert into ASCII art.

Code section:

use clap::Parser;

/// Structure to hold the command-line arguments
#[derive(Parser, Debug)]
#[command(version, about, long_about = None)]
pub struct ImageValue {
    /// Path of the image to convert
    #[arg(short, long)]
    path: String,

    /// Scale factor for ASCII art (default is 3)
    #[arg(short, long, default_value_t = 3)]
    scale: u32,
}

Explanation:

#[derive(Parser, Debug)] : This line uses clap's Parser derive macro to automatically generate the code needed to parse command-line arguments based on the structure's fields. The Debug trait allows you to print the structure for debugging purposes.
#[command(version, about, long_about = None)]: This attribute configures the command-line parser. version includes the version information from Cargo.toml, about adds a brief description of the application, and long_about = None specifies that no extended description is provided.
path Field:
#[arg(short, long)]: This specifies that the path field can be provided via the -p (short) or --path (long) command-line arguments.
path: String: This field will hold the path to the image file that you want to convert to ASCII art.
scale Field:
#[arg(short, long, default_value_t = 3)]: This specifies that the scale field can be provided via the -s (short) or --scale (long) command-line arguments. The default_value_t = 3 part sets a default value of 3 if the scale argument is not provided.
scale: u32: This field will hold the scale factor for the ASCII art conversion.

fn get_str_ascii(intent: u8) -> &'static str {
    let index: u8 = intent / 32;
    let ascii: [&str; 8] = [" ", ".", ",", "-", "~", "+", "=", "@"];
    return ascii[index as usize];
}

Explanation:

The get_str_ascii function is designed to map a numerical value (intent) to a specific ASCII character based on its intensity. The function accepts an intent value of type u8 (an 8-bit unsigned integer) and calculates an index to select an ASCII character from a predefined array.

Here’s how it works: First, the function calculates the index into the ascii array by dividing the intent by 32. This division maps the intent values, which range from 0 to 255, into a smaller range of indices from 0 to 7. For instance, an intent value of 10 will result in an index of 0, selecting the character " " (a space). An intent value of 50 will yield an index of 1, selecting ".", and so forth. The array ascii contains a set of eight characters that vary from a space to the "@" symbol, which represent different levels of density or shading.

The function then returns the ASCII character corresponding to the calculated index. This approach is useful for generating ASCII art, where different characters represent varying levels of brightness or detail.

The get_image function is designed to process an image file and print an ASCII representation of it to the console. Here’s a detailed explanation of how this function works:

Function Breakdown

fn get_image(dir: &str, scale: u32) {
    let img: DynamicImage = image::open(dir).unwrap();
    let (width, height) = img.dimensions();

    for y in 0..height {
        for x in 0..width {
            if y % (scale * 2) == 0 && x % scale == 0 {
                let pix = img.get_pixel(x, y);
                let mut intent: u8 = pix[0] / 3 + pix[1] / 3 + pix[2] / 3;
                if pix[3] == 0 {
                    intent = 0;
                }
                print!("{}", get_str_ascii(intent));
            }
        }
        if y % (scale * 2) == 0 {
            println!("");
        }
    }
}

Explanation

Open the Image:
- let img: DynamicImage = image::open(dir).unwrap();: This line uses the image crate to open the image file specified by dir. unwrap() is used here to panic if the image cannot be opened, which is useful for debugging but could be replaced with proper error handling in a production application.
Get Image Dimensions:
- let (width, height) = img.dimensions();: This retrieves the width and height of the image.
Iterate Over Image Pixels:
- for y in 0..height {: This outer loop iterates over each row of pixels in the image.
- for x in 0..width {: This inner loop iterates over each column of pixels in the current row.
Pixel Sampling and Scaling:
- if y % (scale * 2) == 0 && x % scale == 0 {: This condition checks if the current pixel should be sampled based on the scale value. This effectively reduces the image resolution by skipping pixels according to the scale factor.
- let pix = img.get_pixel(x, y);: This retrieves the pixel data at position (x, y).
- let mut intent: u8 = pix[0] / 3 + pix[1] / 3 + pix[2] / 3;: This line calculates a grayscale intensity value from the RGB pixel values. It averages the red, green, and blue channels to create a single intensity value.
- if pix[3] == 0 { intent = 0; }: This checks if the pixel is fully transparent (alpha channel pix[3] is 0) and sets the intensity to 0 if true.
Print ASCII Representation:
- print!("{}", get_str_ascii(intent));: This prints the ASCII character corresponding to the calculated intensity value.
Newline Handling:
- if y % (scale * 2) == 0 { println!(""); }: This prints a newline every scale * 2 rows to ensure the output aligns correctly.

Usage

This function processes an image to produce a textual representation where each character represents a pixel’s intensity in the ASCII art. The scale parameter controls the resolution of the output, with higher values resulting in lower resolution (fewer characters). For example, calling get_image("path/to/image.png", 2) will display a scaled-down ASCII version of the image.

Here is main function

fn main() {
    let value = ImageValue::parse();
    get_image(&value.path, value.scale)
}

Example using this app:

cargo run --- -p [path to the image"]

Cute Ferris Image

Cute Ferris ASCII Image

Image Without Full Zoom

Full code

use clap::Parser;
use image::{DynamicImage, GenericImageView};

#[derive(Parser, Debug)]
#[command(version, about, long_about = None)]
pub struct ImageValue {
    /// Path of image
    #[arg(short, long)]
    path: String,

    /// Scale for Ascii art
    #[arg(short, long, default_value_t = 3)]
    scale: u32,
}

fn get_str_ascii(intent: u8) -> &'static str {
    let index: u8 = intent / 32;
    let ascii: [&str; 8] = [" ", ".", ",", "-", "~", "+", "=", "@"];
    return ascii[index as usize];
}

fn get_image(dir: &str, scale: u32) {
    let img: DynamicImage = image::open(dir).unwrap();
    let (width, height) = img.dimensions();

    for y in 0..height {
        for x in 0..width {
            if y % (scale * 2) == 0 && x % scale == 0 {
                let pix = img.get_pixel(x, y);
                let mut intent: u8 = pix[0] / 3 + pix[1] / 3 + pix[2] / 3;
                if pix[3] == 0 {
                    intent = 0;
                }
                print!("{}", get_str_ascii(intent));
            }
        }
        if y % (scale * 2) == 0 {
            println!("");
        }
    }
}

fn main() {
    let value = ImageValue::parse();
    get_image(&value.path, value.scale)
}

git repositories = https://github.com/Abhishek2010DevSingh/ascii_art