DEV Community: John

Displaying Code Snippets in SolidJS

John — Sun, 17 Nov 2024 18:16:07 +0000

The SolidJS ecosystem, while growing, is still relatively small compared to frameworks like React. This can sometimes make it challenging to find tools and solutions specific to SolidJS. Recently, I participated in the #SolidStart2024 hackathon, where I created an app on the SolidStart framework. Through this experience, I encountered a need for a lightweight way to display code snippets within the app.

Introduction

In building my app, I needed to display some code snippets in a readable format, but I didn’t want to add the overhead of a full-fledged code editor like CodeMirror. While CodeMirror is a powerful option, it felt like overkill for simple code block formatting needs. Instead, I found a solution that’s more suitable for the SolidJS ecosystem: Shiki.

💡 Attention SolidJS fans: If you’re a SolidJS or SolidStart enthusiast, we would love your support! Check out our hackathon project, Spotter by Emmanuel Ajike, on SolidHack 2024. Your vote means a lot, and it costs nothing to participate!

API Observability and Spotter.dev

API observability is not the same as logging. With logging, you often have to know in advance what to log and where to look. Observability, on the other hand, provides a full picture of the data flowing through your API, which is crucial for production environments where users rely on your product.

As developers in 2024 and beyond, building robust APIs is critical for delivering real-world solutions. With this in mind, I created Spotter.dev—a developer tool designed to enhance the experience of working with SolidStart REST APIs and microservices. Spotter provides a clean overview of each API endpoint, making it easy to understand the data entering and leaving your services, which ultimately leads to better user experiences.

Using Shiki for Code Highlighting

To format code snippets without the weight of a code editor, I chose Shiki. Shiki is a tool that formats code as HTML, making it simple, intuitive, and easy to use. Here’s a quick example:

const code = `console.log('Shiki is great.')`;

const html = (await codeToHtml(code, {
  lang: "javascript",
  theme: "slack-dark",
})) as string;

In this example, the codeToHtml function takes the code as the first parameter and a configuration object as the second. The configuration specifies the language and theme.

One drawback is that Shiki is asynchronous, which can introduce a delay when rendering code. By using some SolidStart features, we can optimize rendering and minimize this delay:

createResource – Fetches the highlighted HTML.
onCleanup – Clears any previous HTML content from the wrapper.
createEffect – Renders the code.

Here’s the full CodeBlock component I built:

import { codeToHtml } from "shiki";
import { createResource, Suspense, onCleanup, createEffect } from "solid-js";
import { cn } from "~/lib/utils";

const CodeBlock = (props: {
  code: string;
  lang: "json" | "javascript";
  class?: string;
}) => {
  let containerRef!: HTMLDivElement;

  // Fetch the highlighted HTML
  const [html] = createResource(async () => {
    return (await codeToHtml(props.code, {
      lang: props.lang,
      theme: "slack-dark",
    })) as string;
  });

  // Clear previous HTML before setting new content
  onCleanup(() => {
    if (containerRef) containerRef.innerHTML = "";
  });

  // Render the highlighted HTML
  createEffect(() => {
    if (html() && containerRef) {
      containerRef.innerHTML = html() as string;
    }
  });

  return (
    <div
      ref={containerRef}
      class={cn(
        "[&>*]:p-3 [&>*]:rounded-lg [&>*]:font-mono [&>*]:text-sm",
        props.class
      )}
    ></div>
  );
};

export default CodeBlock;

Usage Example

To use the CodeBlock component, simply wrap it with a Suspense component to handle loading states. Here’s an example:

<Suspense fallback={<div>Loading Code</div>}>
  <CodeBlock code={code} lang="json" />
</Suspense>

This approach allows you to display highlighted code snippets with minimal overhead, integrating nicely into the SolidStart framework.

Conclusion

I hope this blog post offers a helpful solution for displaying code snippets in SolidJS. With Shiki, you don’t need the extra weight of Codemirror. Instead, you get a simple, effective tool that meets most needs without overcomplicating your app.

Thank you for reading, and if you find this helpful, please consider supporting our project, Spotter by Emmanuel Ajike, on SolidHack 2024! Your vote would mean a lot to us.

Ollama chatbot with vercel ai with pgai, pgvector.

John — Mon, 11 Nov 2024 06:07:26 +0000

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

In this project, I’ve developed a prototype for an AI-powered personal knowledge assistant (think "second brain") called pgai. It’s designed to work locally and includes integrations with cutting-edge AI tools like Gemini LLM and Ollama, as well as essential database technologies like Postgres and Drizzle ORM. The project is based on Vercel’s repository and adapted for compatibility with locally running language models (LLMs), which keeps the functionality self-contained and secure on personal machines.

The main objective behind this project is to explore how easily we can create, embed, and query knowledge bases locally using tools that are accessible and developer-friendly.

Demo

You can view the demo on Vercel here: pgai-challenge

The GitHub repository is available here: pgai_challenge

Tools Used

AI SDK & Gemini LLM: These tools power the underlying logic and intelligence of pgai.
Ollama: A locally-hosted LLM server that allows me to run and access models directly on my machine without needing cloud-based resources.
Postgres with pgai and vector extensions: Postgres isn’t just storing data here—it’s playing a central role in embedding and querying information efficiently.
Drizzle ORM: A lightweight ORM for managing database interactions.
Next.js: Provides the frontend and API functionality for the application, making it fast, reliable, and easy to navigate.

Setting Up the Environment

Before you can run pgai, make sure you have the following installed:

Docker: If you’re new to Docker, I suggest using Docker Desktop for a beginner-friendly setup.
Ollama: Download and install Ollama’s binary for your system here. Once installed, verify by running:

  ollama --help

LLM model: You’ll need to pull a model, for example, llama3.2. Run:

  ollama pull llama3.2

TimescaleDB: Use Docker to set up TimescaleDB. In a working directory, create a file named docker-compose.yml and paste in this configuration:

  services:
    timescaledb:
      image: timescale/timescaledb:latest-pg16
      container_name: timescaledb
      environment:
        - POSTGRES_DB=mydb
        - POSTGRES_USER=myuser
        - POSTGRES_PASSWORD=mypassword
      ports:
        - "5444:5432"
      volumes:
        - timescaledb_data:/var/lib/postgresql/data
      restart: unless-stopped

  volumes:
    timescaledb_data:
      driver: local

Run docker-compose up --build in this directory to start TimescaleDB, which will enable the essential pgai and vector extensions.

Using pgai and Postgres Vector Extensions

To configure Postgres for handling AI queries, you’ll need to install the pgai extension and set up a table for your data.

Enable the pgai Extension

To start using AI embeddings directly within SQL queries, enable the extension:

CREATE EXTENSION IF NOT EXISTS ai CASCADE;

Setting Up the Lyrics Table

Here’s an example of a table schema to store lyrics along with metadata and embeddings:

CREATE TABLE lyrics (
    id SERIAL PRIMARY KEY,
    author TEXT,
    title TEXT,
    content TEXT,
    metadata JSON,
    embedding vector(768)
);

INSERT INTO lyrics (id, author, title, content, metadata) VALUES 
(1, 'Alex Rivers', 'Wandering Heart', 'I took the road less traveled, through shadows and light, searching for pieces I lost in the night.',
    '{"genre": "Indie Folk", "year": 2022, "mood": "reflective"}'),
(2, 'Jamie Cross', 'Echoes of You', 'I hear your voice in the silence, a whisper that fades, memories linger, but time never waits.',
    '{"genre": "Pop Ballad", "year": 2023, "mood": "nostalgic"}'),
(3, 'Taylor Lane', 'Endless Dream', 'We danced in the midnight, stars in our eyes, promised forever, but forever flies.',
    '{"genre": "Synthwave", "year": 2021, "mood": "dreamy"}'),
(4, 'Morgan Lee', 'Fading Fire', 'The embers are low now, but they still burn bright, a love once so fierce, lost in the night.',
    '{"genre": "Rock", "year": 2022, "mood": "intense"}'),
(5, 'Casey Dawn', 'Empty Streets', 'These streets hold stories of laughter and tears, footsteps that echo through the passing years.',
    '{"genre": "Blues", "year": 2020, "mood": "melancholy"}');

Generating Embeddings

Use the following SQL to generate embeddings based on each row’s content:

UPDATE lyrics SET embedding = ai.ollama_embed('nomic-embed-text', content, host => 'http://host.docker.internal:11434');

This command utilizes the pgai extension to call Ollama’s embedding model and automatically store embeddings directly in your database, making data retrieval more efficient.

Running Embedding-based Queries

Once embeddings are generated, you can query based on similarity to find lyrics related to a specific theme or mood. Here are some examples:

Simple Similarity Query

SELECT embedding <=> ai.ollama_embed('nomic-embed-text', 'I am sad', host => 'http://host.docker.internal:11434') as distance
FROM lyrics
ORDER BY distance;

This finds the closest matches to the query “I am sad” and ranks them based on distance.

Query with Metadata Filter

You can add filters for metadata, such as searching only within a specific genre:

SELECT embedding <=> ai.ollama_embed('nomic-embed-text', 'timeless music', host => 'http://host.docker.internal:11434') as distance
FROM lyrics 
WHERE metadata->>'genre' = 'Synthwave'
ORDER BY distance
LIMIT 10;

This query will return lyrics from the “Synthwave” genre most similar to the phrase “timeless music.”

Final Thoughts

This project shows how tools like pgai and Ollama make it easy to use Postgres as a knowledge base with powerful vector search capabilities. The potential applications are vast: you could adapt this for organizing any data—articles, notes, even multimedia—in a way that allows for more intelligent querying.

Working with pgai has been exciting as it removes many of the usual complexities in building and deploying AI-based applications. This project has been an eye-opener to how quickly AI tools are evolving to make data organization, recall, and search more intelligent and user-friendly. I hope this prototype showcases the potential of combining Postgres with locally hosted AI models for any knowledge-based application!

Prize Categories: Open-source Models from Ollama, Vectorizer

Uploadnow - simple file explorer

John — Sun, 13 Oct 2024 12:16:17 +0000

This is a submission for the The Pinata Challenge

What I Built

Uploadnow is a web application that allows users to upload and manage their files (images, videos, audios, etc.) easily. It utilizes Pinata for storage and retrieval, enabling a secure and consistent environment for asset management. This project is a submission for the Pinata Challenge. My inspiration is Uploadthing.

Prerequisites:

Basic knowledge of Node.js.
Pinata SDK for handling file uploads.
Convex.dev real-time database.
Next.js and Tailwind CSS.

Project setup

Run the following command to initialize a new ShadCN Next.js project:

npx shadcn@latest init
// or
pnpm dlx shadcn@latest init

Create a .env.local file and copy the following into it:

PINATA_API_KEY=""
PINATA_API_SECRET=""
PINATA_GATEWAY="*.mypinata.cloud"
PINATA_JWT=""

# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=""

NEXT_PUBLIC_CONVEX_URL=""

# Fingerprint config
FINGER_PRINT_API_KEY=""

Features:

Responsive design: The application is designed to be usable on mobile devices as well as desktop screens.
Intuitive UI: The user interface is simplified, removing unnecessary UI elements and using easy-to-understand text instructions and toast notifications.
Concise error messages: I focused on creating user-friendly error messages, thinking from a user's perspective, not just a developer's.
Efficient file upload: The file upload feature allows users to upload various file types. Files are queued, and handlers like upload, cancel, retry, and remove file are provided.
Multi-file uploads.
Real-time support.
Pagination.
CDN usage: Users can open files in new tabs, and the links expire after a few seconds for added security.
No login required: Browser fingerprinting is used to associate and differentiate users without requiring usernames and passwords.

Pinata Setup

This project requires credentials from Pinata, so head over to the dashboard.

Enter your details.

This is your dashboard.

Click on the "API Keys" tab, then create a new key.

Give your key a name, choose the appropriate permissions, and click "Generate".

Copy your credentials and store them securely because they are shown only once. Generate a new one if forgotten.

Demo

The deployed version of the application can be accessed at Uploadnow.

My Code

1. Pinata upload

This is a Next.js route handler. It is a POST request handler that receives the file and other necessary details. The file is passed to the Pinata JavaScript SDK by calling the await pinata.upload.file(file) method, passing the file object as its first argument.

export const POST = async (req: Request) => {
  try {
    const form = await req.formData();

    const file = form.get("file") as File;
    const sidebarId = form.get("sideBarId") as Sidebar;
    const fingerPrintId = form.get("visitorId") as string;

    if (!file || !sidebarId || !fingerPrintId) {
      return Response.json(
        { message: "Invalid request, please provide arguments." },
        { status: 403 }
      );
    }

    const upload = await pinata.upload.file(file);

    const convexDb = await fetchMutation(api.files.createFile, {
      sidebarId,
      fingerPrintId,
      pinataId: upload.id,
      filename: upload.name,
      pinataCid: upload.cid,
      mimeType: upload.mime_type,
      pinataCreatedAt: upload.created_at,
    });

    if (!convexDb) {
      return Response.json(
        { message: "Was unable to upload file. Try again", uploaded: false },
        { status: 500 }
      );
    }

    return Response.json({ message: convexDb.message, uploaded: true });
  } catch (err: any) {
    console.error(err);

    return Response.json(
      { message: "Internal server error, please try again later." },
      { status: 500 }
    );
  }
};

2. Setting up Convex DB Schema

Since this project uses Convex, it's important to set up the database structure. There is no need for a users table because we use Fingerprint.js.

import { defineSchema, defineTable, GenericSchema } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  files: defineTable({
    fingerPrintId: v.string(),
    pinataId: v.string(),
    pinataCid: v.string(),
    filename: v.string(),
    mimeType: v.string(),
    pinataCreatedAt: v.string(),
    sidebarId: v.union(
      v.literal("all"),
      v.literal("audios"),
      v.literal("videos"),
      v.literal("images"),
      v.literal("documents"),
      v.literal("archives")
    ),
  }),
});

The complete source code for Uploadnow can be accessed via GitHub.

More Details

Gotchas:

Buggy Group list method:

My initial intention was to integrate the groups feature of Pinata, but after the groups list method failed to work, I had to reconsider the feature.

const groups = await pinata.groups.list();

When the method is called, it simply returns an empty array. I could not get it to work even after changing secret credentials. The REST API eventually worked, but by then I had already pivoted to other features. It's not a great developer experience juggling between REST API and SDK.

Unable to send asset from the client:

The Pinata API is intuitive, but I could not find a way to send my assets from the client to Pinata directly. This feature would help save server resources by not uploading to my server first, then uploading to Pinata. I am not saying the current approach is bad, just that a client-side upload option would be better for developers, especially for features like pausable uploads.

Recommendations:

As a developer who values tools that enhance the developer experience, here are some recommendations:

Provide default asset URLs: Allow developers to choose between generating signed URLs or using a default one. The lack of a default asset link can make developers reconsider integration strategies, which may push them toward alternative solutions. It also introduces UI challenges because developers need to be aware of the issue to effectively integrate the API.
Return error and data tuples: The SDK should return both error and data tuples, letting developers choose how to handle each scenario.

// Example from Supabase
const { error, data } = await pinata.upload.file(file);

if (error) {
  throw new PlatformError("Pinata file upload failed.");
}

Add support for retry strategies: When the SDK fails, it should automatically retry, making it more resilient against errors.

I worked on this challenge alone.

Credits

I leveraged an open-source Shadcn template, which provided me with a base to build my app. Specifically, I used the upload dialog from uploader.sadmn.com to handle asset uploads. The rest of the application was built by me alone. The template contributed to less than 2% of the overall codebase.

Conclusion:

This challenge was very good, not too competitive or challenging, but very educational. I learned a lot about files and how to think about the user experience. That's all for today! Stay tuned for more updates and keep building amazing apps! 🚀✨
Happy coding! 😊

Stellar by Example: Web2 to Web3 Beginner Guide.

John — Sun, 18 Aug 2024 09:27:27 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge: Create a Tutorial

I have created a comprehensive tutorial designed to guide developers who are familiar with Web2 technologies into the world of Web3, specifically using Stellar's Soroban smart contracts. The guide covers fundamental concepts, practical code examples, and deployment strategies, aiming to bridge the knowledge gap and make the transition smoother. It also includes a walkthrough on using Okashi, a Remix alternative IDE for Soroban, to enhance the coding experience.

You can view the complete tutorial here.

What I Created

The Stellar by Example: Web2 to Web3 Beginner Guide is a detailed documentation site that breaks down the key aspects of developing on Stellar using Soroban smart contracts. My motivation for creating this guide came from the challenges I faced during a previous Stellar hackathon, where outdated or inconsistent documentation and a lack of clear direction hindered my progress.

This guide is designed to address those pain points by providing:

Clear Explanations: Each concept is broken down with beginner-friendly explanations, ensuring that even those new to blockchain can follow along.
Practical Examples: The guide includes numerous code snippets and real-world applications, from simple "Hello World" contracts to more complex dApps like Crowdfunding platforms.
Tools and Resources: Links to useful tools, such as Okashi, are provided to streamline the development process. This ensures developers can immediately apply what they learn in a practical environment.

The guide is structured to be a living document that evolves with the Stellar ecosystem, ensuring developers always have access to the latest information.

Journey

My journey creating this submission started with reflecting on the obstacles I encountered during the last Stellar hackathon. One major issue was the inconsistency in the documentation, where examples often referenced outdated SDK versions or lacked sufficient detail, making it difficult to execute even straightforward tasks.

I spent considerable time researching and testing different approaches to ensure the guide I created would avoid these pitfalls. I focused on making the content clear, concise, and, most importantly, up to date with the current state of the Soroban SDK. Through this process, I deepened my understanding of the Stellar ecosystem and discovered new tools like Okashi, which significantly improve the development experience.

I am particularly proud of how the guide simplifies complex concepts without diluting the technical depth, making it accessible to a wide range of developers. Moving forward, I hope to continue refining the guide, adding more advanced topics, and perhaps even integrating video walkthroughs to further support the Stellar developer community.