Forem: Bytefer

Ollama-OCR for High-Precision OCR with Ollama

Bytefer — Mon, 25 Nov 2024 23:08:13 +0000

Llama 3.2-Vision is a multimodal large language model available in 11B and 90B sizes, capable of processing both text and image inputs to generate text outputs. The model excels in visual recognition, image reasoning, image description, and answering image-related questions, outperforming existing open-source and closed-source multimodal models across multiple industry benchmarks.

Find Your Best Next.js Starters

Find Awesome Shadcn

Llama 3.2-Vision Examples

Handwriting

Optical Character Recognition (OCR)

In this article I will describe how to call the Llama 3.2-Vision 11B modeling service run by Ollama and implement image text recognition (OCR) functionality using Ollama-OCR.

Features of Ollama-OCR

🚀 High accuracy text recognition using Llama 3.2-Vision model
📝 Preserves original text formatting and structure
🖼️ Supports multiple image formats: JPG, JPEG, PNG
⚡️ Customizable recognition prompts and models
🔍 Markdown output format option
💪 Robust error handling

MacOS Vision OCR: Accurate and Fast OCR Tool for macOS

Installing Ollama

Before you can start using Llama 3.2-Vision, you need to install Ollama, a platform that supports running multimodal models locally. Follow the steps below to install it:

Download Ollama: Visit the official Ollama website to download the installation package for your operating system.
Install Ollama: Follow the prompts to complete the installation according to the downloaded installation package.

Install Llama 3.2-Vision 11B

After installing Ollama, you can install the Llama 3.2-Vision 11B model with the following command:

ollama run llama3.2-vision

How to use Ollama-OCR

npm install ollama-ocr
# or using pnpm
pnpm add ollama-ocr

OCR

import { ollamaOCR, DEFAULT_OCR_SYSTEM_PROMPT } from "ollama-ocr";

async function runOCR() {
  const text = await ollamaOCR({
    filePath: "./handwriting.jpg",
    systemPrompt: DEFAULT_OCR_SYSTEM_PROMPT,
  });
  console.log(text);
}

Input Image:

Output：
The Llama 3.2-Vision collection of multimodal large language models (LLMs) is a collection of instruction-tuned image reasoning generative models in 118 and 908 sizes (text + images in / text out). The Llama 3.2-Vision instruction-tuned models are optimized for visual recognition, image reasoning, captioning, and answering general questions about an image. The models outperform many of the available open source and closed multimodal models on common industry benchmarks.

Markdown Output

import { ollamaOCR, DEFAULT_MARKDOWN_SYSTEM_PROMPT } from "ollama-ocr";

async function runOCR() {
  const text = await ollamaOCR({
    filePath: "./trader-joes-receipt.jpg",
    systemPrompt: DEFAULT_MARKDOWN_SYSTEM_PROMPT,
  });
  console.log(text);
}

Input Image：

Output:

Use MiniCPM-V 2.6 Vision Model

async function runOCR() {
  const text = await ollamaOCR({
    model: "minicpm-v",
    filePath: "./handwriting.jpg.jpg",
    systemPrompt: DEFAULT_OCR_SYSTEM_PROMPT,
  });
  console.log(text);
}

ollama-ocr is using a local vision model, if you want to use the online Llama 3.2-Vision model, try the llama-ocr library.

Top 8 Most Popular Open-Source Next.js Boilerplates/Starter

Bytefer — Mon, 25 Nov 2024 21:54:09 +0000

Next.js is an open source web development framework built on top of Node.js that supports React-based web application features such as server-side rendering and generating static websites.

Although Next.js. officially allows us to quickly create Next.js projects with the npx create-next-app@latest command, mature web projects often involve user authentication, databases, payments, and other features. Developing these features from scratch can be challenging for Next.js newbies. There are some great open source Next.js Starter projects that we can use to meet this challenge and speed up our development process.

Next, I'm going to introduce 8 Next.js boilerplates recommended by the Next.js Starter Directory website.

1. tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze.

MIT / 8.9K+ Star

Tech Stack

Framework: Next.js
UI Library: @headlessui/react
CSS Styling: Tailwind CSS
CMS: contentlayer2

2. Vercel Platforms

A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.

MIT / 5.7K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
ORM: Drizzle
Auth: NextAuth.js
Editor: Novel
Charts: Tremor

3. next-forge

Production-grade Turborepo template for Next.js apps.

MIT / 4.1K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
UI Library: Radix UI
ORM: Prisma
DB: Neon
Payment: Stripe

4. fragments

Open-source Next.js template for building apps that are fully generated by AI.

Apache-2.0 / 3.5K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
UI Library: Radix UI
DB: Supabase

5. next-shadcn-dashboard-starter

Admin Dashboard Starter with Nextjs14 and shadcn ui.

MIT / 2.9K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
Components: Shadcn-ui
Auth: Auth.js
State Management: Zustand

6. langchain-ai/langchain-nextjs-template

LangChain + Next.js starter template.

MIT / 1.5K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
DB: Supbase
AI: Langchainjs

7. nextjs-starter-kit

The Ulimate Nextjs Starter Kit. Build your next SAAS product of your dreams. Batteries included.

MIT / 1.2K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
DB: Supbase
ORM: Prisma
Auth: Clerk
Payment: Stripe

8. chadnext

ChadNext - Quick Starter Template for your Next project includes Next.js 15 App router, Shadcn UI, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.

MIT / 1K+ Star

Tech Stack

Framework: Next.js
CSS Styling: Tailwind CSS
Components: Shadcn-ui
ORM: Prisma
Auth:LuciaAuth
Payment: Stripe

In addition to the above 8 open source next.js boilerplates, Next.js Starter Directory also introduces other boilerplates , you can visit Next.js Starter Directory to find more boilerplates. If you have any other great next.js boilerplates, feel free to leave me a message.

10 Component Libraries You Must Know To Use Shadcn UI!

Bytefer — Thu, 24 Oct 2024 14:27:23 +0000

shadcn-ui is a modern React component library that provides developers with a set of highly customizable and accessible UI components.

Although Shadcn UI comes with a variety of built-in components, it still cannot meet the needs of different application scenarios. In this article I will share 10 useful components recommended by Awesome Shadcn UI.

Github awesome-shadcn-ui

1. Shadcn UI Sidebar (New)

A composable, themeable and customizable sidebar component.

MIT

2. Plate

Rich-text editor with shadcn/ui.

MIT / 11K+

3. Vaul

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices.

MIT / 6.3K+

4. Autoform

🌟 Automatically render forms for your existing data schema

MIT / 2.9K+

5. shadcn-table

Shadcn table with server-side sorting, filtering, and pagination.

MIT / 2.7K+

6. maily.to

Craft beautiful emails effortlessly with Maily, the powerful email editor that ensures impeccable communication across all major clients.

MIT / 1.6K+

7. emblor

A fully-featured tag input component built with shadcn/ui

MIT / 706

8. date-range-picker-for-shadcn

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison.

MIT / 666

9. shadcn-minimal-tiptap

The Minimal Tiptap Editor is a lightweight, customizable rich text editor component built for Shadcn. It provides an intuitive interface for text formatting and editing.

MIT / 659

10. sortable

Sortable built with shadcn/ui, radix ui, and dnd-kit.

MIT / 438

In addition to the above 10 open source projects , Awesome Shadcn UI also introduces other projects , you can visit Awesome Shadcn UI to learn more Shadcn related projects.

Top 8 Most Popular Open-Source Next.js SaaS Templates

Bytefer — Wed, 23 Oct 2024 00:16:38 +0000

shadcn-ui is a modern React component library that provides developers with a set of highly customizable and accessible UI components.
The combination of Next.js and shadcn-ui provides a powerful solution for rapid development of Landing Page and SaaS projects. In this article I will share 8 open source SaaS projects recommended by Awesome Shadcn UI.

Github awesome-shadcn-ui

1. Next Saas Starter

Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.

MIT / 5.1K+ Star

Tech Stack

Framework: Next.js
Database: Postgres
ORM: Drizzle
Payments: Stripe
UI Library: Shadcn-ui

2. SaaS-Boilerplate

⚡️ Full-stack React application with Auth, Multi-tenancy, Roles & Permissions, i18n, Landing Page, DB, Logging, Testing.

MIT / 3.8K+ Star

Tech Stack

Framework: Next.js
Database: Postgres
Authentication: Clerk
ORM: Drizzle
Payments: Stripe
UI Library: Shadcn-ui

3. Cloudflare SaaS Kit

Quickly make and deploy full-stack apps with database, auth, styling, storage etc.

3K+ Star

Tech Stack

Framework: Next.js
Database: Cloudflare D1
Authentication: NextAuth.js
ORM: Drizzle
Hosting: Cloudflare Pages
UI Library: Shadcn-ui

4. Saasfly

An easy-to-use and enterprise-grade Next.js boilerplate.

MIT / 1.9K+ Star

Tech Stack

Framework: Next.js
Database: Postgres
Authentication: NextAuth.js
ORM: Prisma
Payments: Stripe
UI Library: Shadcn-ui

5. Next-Saas-Stripe-Starter

Open-source SaaS Starter with User Roles & Admin Panel. Built using Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe, Server Actions.

MIT / 1.8K+ Star

Tech Stack

Framework: Next.js
Database: Neon
Authentication: Auth.js
ORM: Prisma
Payments: Stripe
Hosting: Vercel
UI Library: Shadcn-ui

6.Relivator-Nextjs-Template

Build More Efficient, Engaging, and Profitable Online Stores: Relivator Enhances your eCommerce with the Power of shadcn/ui, Next.js 15, React 19, and more.

MIT / 1K+ Star

Tech Stack

Framework: Next.js
Database: Postgres/MySQL
Authentication: NextAuth.js
ORM: Drizzle
Payments: Stripe
UI Library: Shadcn-ui

7. Nextjs-Starter-Kit

The Ulimate Nextjs Starter Kit. Build your next SAAS product of your dreams. Batteries included.

MIT / 987 Star

Tech Stack

Framework: Next.js
Database: Supabase
Authentication: Clerk
ORM: Prisma
Payments: Stripe
UI Library: Shadcn-ui

8. Rapidlaunch

Beautiful Next.js SaaS Starterkits, Blocks and guides. Built using Shadcn ui, Next.js 14, DrizzleORM, Resend, and more.

MIT / 434 Star

Tech Stack

Framework: Next.js
Database: Postgres
Authentication: Auth.js
ORM: Drizzle
Payments: Lemonsqueezy
UI Library: Shadcn-ui

In addition to the above 8 open source projects , Awesome Shadcn UI also introduces other projects , you can visit Awesome Shadcn UI to learn more Shadcn related projects. If you have any other great SaaS templates, feel free to leave me a message.