Forem: Fahmi Noor Fiqri

Ritsu-Pi EmailOps: Homelab Management via Email powered by Postmark👓

Fahmi Noor Fiqri — Wed, 04 Jun 2025 09:53:20 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

🛠️ What I Built

Ritsu-Pi EmailOps is a lightweight homelab automation system that lets you control Docker containers and monitor system health entirely via email.

You can send natural language commands like:

Subject: Check system metrics
Body: Check how much disk space is left on /mnt/data

And Ritsu-Pi will execute the request, send a structured reply, and leave a secure audit trail — all powered by Postmark’s Inbound Webhook API and an agentic AI using Semantic Kernel.

It’s designed for privacy-minded or remote homelab users who want a secure, script-free ops layer that works over a protocol they already trust: email.

🧪 Demo

Real time demo sending and receiving email. The receive part is a bit slower because I used ProtonMail Bridge and Thunderbird.

Below is some examples of emails sent via Postmark.

You can send emails asking about:

Listing all available docker containers
Start/stop/restart docker containers
Get current system resource status
Get historical CPU/memory usage

The web API running in a Docker container viewed from Portainer:

💻 Code Repository

fahminlb33 / ritsu-pi-emailops

Ritsu-Pi EmailOps - Email-driven DevOps for your Raspberry Pi stack.

📬 Ritsu-Pi EmailOps

Secure homelab management via email.
A Postmark-powered EmailOps module for the Ritsu-Pi homelab automation stack.

✉️ Send commands from your inbox
🐳 Manage Docker containers
🔐 Secure, auditable, and remote
🧠 Built with ASP.NET Core (.NET 9), EFCore, and SQLite

🚀 What is Ritsu-Pi EmailOps?

Ritsu-Pi EmailOps lets you control your homelab Docker containers via email commands, securely processed through Postmark's Inbound Webhook. It’s built for Raspberry Pi and self-hosters who want a zero-UI, minimal-attack-surface, out-of-band control plane.

This project is a feature module of Ritsu-Pi, an open-source platform for managing self-hosted services with automation and observability in mind.

✨ Features

📩 Email-based command interface (via Postmark)
🐳 Docker management: start, stop, restart, status
💻 System monitoring: CPU/memory/disk usage from Prometheus
🔒 Allowlist-based email sender authentication
🧾 Audit log with command history in SQLite
📥 Auto-response email replies with execution results
🖥️ Designed for headless, always-on…

View on GitHub

🧩 How I Built It

Ritsu-Pi EmailOps was built as an extension of my homelab automation system, Ritsu-Pi, with the goal of enabling reliable, low-friction system control using just email.

The core idea: let users manage Docker containers and monitor system health through natural language requests sent via email, with secure execution and auditable replies — no custom apps or SSH needed.

🏗️ Architecture Overview

The app is built using ASP.NET Core Web API along with the integration of Postmark API and Gemini API for agentic AI support with Semantic Kernel.

🧠 Challenges Solved

No mobile app or SSH required: I can trigger server actions securely via email from anywhere.
Audit trail built-in: Every command and response is recorded in the inbox and logs.
Natural language flexibility: Thanks to the agentic layer, I don’t need to remember CLI syntax.

📨 Postmark Integration Challenges

One small challenge was that Postmark requires the From address to match a verified domain. Since I used kodesiana.com, I couldn’t send emails from other domains during testing. I had to adjust the flow to always use a verified sender identity.

🎯 Conclusion

Ritsu-Pi EmailOps reimagines system administration through the lens of simplicity, security, and accessibility — all powered by email.

By combining the universality of email, the reliability of Postmark, and the flexibility of agentic AI, I’ve built a minimal yet powerful platform for homelab control that doesn’t depend on dashboards, SSH, or vendor lock-in.

Whether you're restarting a container on the go, checking disk usage from a smartwatch, or just want your server to answer with a human-readable reply — this project shows that EmailOps can be both practical and surprisingly elegant.

Looking ahead, the next evolution of this project is to turn it into a full-fledged platform engineering tool — enabling teams to manage infrastructure, request deployments, approve changes, and resolve incidents using natural language over email. A lightweight, inbox-native control plane for DevOps and SRE workflows.

Thanks to Postmark and DEV for the opportunity — and to everyone who still believes email is the ultimate universal interface.

Authorization in MCP Server with Permit.io - A JIRA-like Task Management API

Fahmi Noor Fiqri — Sun, 04 May 2025 08:15:54 +0000

This is a submission for the Permit.io Authorization Challenge: AI Access Control

🦄 What I Built

I built a prototype task management API, like JIRA. You can keep track of Epics, Tasks, and Comments just like in JIRA. The app is not just a REST API, I also built a working MCP server to interact with the API.

With Permit.io, the authorization is seamless between the Hono REST API and MCP server. Cutting the development time and simplifies the policy configuration.

This project should fit into the AI Access Control and API-First Authorization category.

💻 Tech Stack

Hono for building REST API
MCP SDK for building the MCP server
SQLite as the database

🐋 Demo

Below is a demo when invoking the Hono REST API and MCP server using inspector.

When using the inspector, you can ask for a session code (akin to the JWT for authentication in the REST API) to access the resources.

The session token will be sent to a webhook, you can use services such as Webhook.site to receive the session code.

The session code is formatted as SES-xxxxxx.

🤠 Next: Claude Desktop

I have tried to use the MCP server in Claude Desktop, and it worked... a little. I can login and get a session code but currently the MCP server is having some trouble to call the PDP API in the same Docker network.

I'll look into it in the future to troubleshoot the network communications between the MCP server container and PDP server.

💻 Project Repo

fahminlb33 / devto-permitio-mcp

A simple JIRA-like task management with Permit.io authorization (Hono + MCP)

DEV.to Permit.io Authorization Challenge

This is a simple JIRA-like task management API, you can expect feature such as Epics, Tasks, and Comments just like in JIRA.

The key point of this project is this repo contains two APIs, (1) a classic REST API using Hono.js and (2) an MCP using the MCP TypeScript SDK.

Permit.io Allowed for Easy Authorization

REST API with Hono

In traditional web API, implementing Permit.io authorization as a middleware simplifed and also centralized the authorization process, no more messy authorization check on every endpoints.

MCP Server

The same authorization technique in the web API can easily be reused in MCP server (with some changes). With Permit.io, the authorization process is "framework-agnostic" so I can effectively implement the authorization process with any framework easily.

Development Setup

To run this project, you will need NodeJS 23 and Docker.

Follow these steps:

Clone this repo git clone https://github.com/fahminlb33/devto-permitio-mcp.git
Install…

View on GitHub

🛣️ My Journey

🤔 Understanding the Permit.io Concepts

Resources, Roles, are Instance Roles the top three concepts to master in this project. In this project, there are 4 resources:

User
Epic
Task
Comment

with this relationship:

Epic is a parent of Task
Task is a parent of Comment

I also created 3 different roles:

Admin, can do everything
Manager, can do most of the things like creating, editing, and deleting Epic and Task
Developer, can be assigned/unassigned tasks, leave comments, and report status/time spent on a task

In conclusion, I implemented RBAC and ReBAC authorization for the APIs. Next, I configured the roles and actions in the Permit UI.

🧰 Policy Configuration

🔐 API-First Authorization

Implementing authorization in Hono is as simple as creating a middleware.

server.use(
  except("/api/public/*", async (c, next) => {
    const jwtPayload = c.get("jwtPayload");
    if (!jwtPayload) {
      return c.json({ error: "Unauthorized" }, HttpStatus.Unauthorized);
    }

    const path = c.req.path.split("/");
    if (path.length < 2) {
      return c.notFound();
    }

    const { resource, action } = getResourceActionFromReq(
      c.req.method,
      c.req.path,
      jwtPayload.role !== "Admin",
    );

    const permitted = await permit.check(jwtPayload.sub, action, resource);
    if (!permitted) {
      return c.json({ error: "Permission denied" }, HttpStatus.Forbidden);
    }

    await next();
  }),
);

🤖 Authorization for AI Applications with Permit.io

Authorization in the MCP SDK essenstialy the same, but with a custom user lookup. Also, since the MCP SDK does not have the concept of middleware, this authorizeTool function wraps the tool handler with the authorization routine.

export function authorizeTool<T extends z.ZodRawShape>(
  action: string,
  resourceName: string,
  cb: (
    data: z.objectOutputType<T, z.ZodTypeAny>,
    user: { id: string; role: UserRole },
  ) => Promise<CallToolResult>,
): ToolCallback<T> {
  // @ts-ignore
  return async (
    args: z.objectOutputType<T, z.ZodTypeAny>,
    extra: RequestHandlerExtra<ServerRequest, ServerNotification>,
  ): Promise<CallToolResult> => {
    // query the user data
    const rows = await db
      .select()
      .from(sessionsTable)
      .innerJoin(usersTable, eq(usersTable.id, sessionsTable.user_id))
      .where(eq(sessionsTable.code, args.sessionCode));

    if (rows.length === 0) {
      return {
        content: [
          {
            type: "text",
            text: MessageConstants.Forbidden,
          },
        ],
      };
    }

    // authorize with Permit.io
    const user = rows[0];

    const permitted = await permit.check(user.users.id, action, resourceName);
    if (!permitted) {
      return {
        content: [
          {
            type: "text",
            text: MessageConstants.Forbidden,
          },
        ],
      };
    }

    return await cb(args, {
      id: user.users.id,
      role: user.users.role as UserRole,
    });
  };
}

🚧 Challenges

Getting used to the concepts of user, resource instance, role assignment, etc. is quite challenging at first, but when I started to tinker with the Permit.io App, it was quite easy to understand.

ReBAC require the use of local PDP server. I find out the hard way when my PDP check always failed. When testing with Postman to the cloud PDP endpoint, the response indicated that to use ReBAC you have to use the local PDP.

Some bulk operations are not yet available in the permitio npm package such as the bulk delete resource instances. Not a problem though since the Redoc API documentation has a thorough example for the API.

🐠 Conclusion

This project demonstrated the flexibility of Permit.io for authorization in a classic REST API using Hono library and MCP SDK.

Permit.io allowed seamless and flexible authorization for both classic REST APIs and MCP server. With a wide range of authorization policies, enforcing auth policy is as simple as calling permit.check().

You can check the GitHub repo for more information. You can access the source code, Postman collection, and tutorial on how to run the project and test it yourself.

Trading Signal from Sentiment Analysis using Bright Data API

Fahmi Noor Fiqri — Sun, 29 Dec 2024 09:54:56 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

Now days, we can easily find many open-source trading bots to automate trading activities in hope to gaining profits. In this article, I will share my latest project, making use of Bright Data Web Scraper API and open-source LLM to create a simple trading signal dashboard.

The idea itself is not new and there are many trading bots that can use publicly available data from news and social media to create trading signal. Heck, even a goldfish could turn more profit trading stock than people in r/WallStreetBets as demonstrated in Michael Reeves video.

What I Built

I built a dashboard where you can view a so called "trading signal" from sentiment analysis of various news source. In this project, I used data from BBC, CNN, and Reuters as sentiment source. Then, I used Yahoo Finance to get the stock (AAPL, META, MSFT, NVDA) historical data. I also used Ollama and Llama 3.1 to predict the sentiment from the news.

Overall, the process is not complicated. Get the data, perform sentiment analysis, and overlay the sentiment in the stock price historical plot. I will use Streamlit and Plotly to plot the data.

Demo

You can check the web app here.

fahminlb33 / devto-brightdata-scraping-sentiment

Bright Data Hackathon: Trading Signal using Sentiment Analysis

This repo contains the source code for my submission for Bright Data Web Scraping Hackathon at DEV.to.

Setup

Use uv to install dependencies. Clone this repo and run uv sync to install the packages.

Running the Project

Trigger data collection API to scrape the news from multiple sources.

python scripts/scrape_api.py --api-key YOUR_API_KEY discover --output-file ./data/snapshot-bbc.jsonl --keywords 'apple,facebook meta,microsoft,nvidia' --engine bbc
python scripts/scrape_api.py --api-key YOUR_API_KEY discover --output-file ./data/snapshot-cnn.jsonl --keywords 'apple,facebook meta,microsoft,nvidia' --engine cnn
python scripts/scrape_api.py --api-key YOUR_API_KEY discover --output-file ./data/snapshot-reuters.jsonl --keywords 'apple,facebook meta,microsoft,nvidia' --engine reuters

Copy the contents of all 3 snapshot files into one, then download the scraped data.

python scripts/scrape_api.py --api-key YOUR_API_KEY download --snapshots-file ./data/snapshot-all.jsonl --output-path ./data/scraped

Then, run these notebooks in order:

Note: You will also need Ollama with Llama 3.1 to run the LLM extraction notebook.

View on GitHub

Here's what you can explore in the web app:

Trading Signal, in this page you can see when a news articles are posted and its sentiment analysis result. In general, if the article provides a hopeful/positive opinion, the sentiment value will be +1 and -1 otherwise.

Green = positive outlook/bullish.
Red = negative outlook/bearish.

What we want is a green dot, followed by a rising stock price and vice versa, red dot followed by falling stock price. But as we can see above, it is not always the case.

Sentiment Analysis, in this page you can see some statistics from the sentiment analysis process, and you can also see the news headline and its corresponding sentiment. Sometimes, the LLM cannot reliably classify the sentiment.

How I Used Bright Data

I mainly used the Web Scraper API from Bright Data to collect the news articles. Bright Data has a wide selection of supported website for scraping, and thus greatly streamline the modelling process in this project. I only used a small subset of news website offered by Bright Data and I can already get a working prototype. We can definitely expand this project by adding more website, maybe even r/WallStreetBets to get more trading signals.

Even if the website you want to scrape is not available in the Web Scraper API, you can always create your own script or use the Scraping Browser service to build your very own data collection script. I actually did this for my first submission.

Prize Categories

Although I filled the hackathon category for the third prompt, I believe this project could fall into the second prompt too.

Final Thoughts

This is a really unexpected project. Originally, I planned to submit just one project, but in the last minute, I got inspired from watching Michael Reeves video and helping my friend finishing his research thesis, also using stock market data. Also, I can't believe I finished this project in less than 8 hours.

I will definitely will not finish this project fast if I have to manually create the scraping script from scratch and waiting for the data. Thanks to Bright Data Web Scraper API, I can quickly get the data I need.

Web Scraping for Product Analysis and Price Comparison

Fahmi Noor Fiqri — Sun, 22 Dec 2024 13:07:07 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

Product research plays an important role in market research, search engine optimization, and for me personally, to find the best price for a product that I want to buy. For some time, I have been looking into the E-Katalog LKPP, a government-controlled online marketplace. This marketplace supposedly providing government bodies, schools, and institutions access to all kinds of products, from stationery, laptops, and many more.

One of my family members owns a laptop bought from this marketplace and, oh boy, it was crappy. It was a laptop with an obscure brand, and it was crazy expensive compared to another brand with the same price tag.

So, I turned my interest in comparing the product prices between LKPP and other online marketplace to find if there was a significant difference.

In this post, I will tell you how I used Bright Data platform to scrape the LKPP website using Scraping Browser and the Web Scraping API to collect products data from the online marketplace for comparison.

Let’s dig in!

What I Built

I built a dashboard where you can explore product statistics from multiple marketplace (LKPP, Tokopedia, Lazada) and compare them. Also, with the power of open source LLMs, we can cluster the products to uncover interesting relationships.

Overall, we can divide the process into several steps, as shown below.

First, I used the Scraping Browser to collect data from E-Katalog LKPP, then, using this data, I extracted popular product keywords for search in two other marketplaces, namely Tokopedia and Lazada. For this case, I used the Web Scraping API as a convenient way to collect the products data.

After we have the data from three different sources, I used Ollama + Llama 3.1 model and DSPy to extract structured data (processor, memory, and storage) from the scraped product description. We will also use an embedding model to create text embedding and then cluster the data to explore similar products in the marketplaces.

Finally, I used Streamlit to deploy the app.

Demo

You can access the web app here.

fahminlb33 / devto-brightdata-scraping

Bright Data Hackathon

Demo: here

This repo contains the source code for my submission for Bright Data Web Scraping Hackathon at DEV.to.

Setup

Use uv to install dependencies. Clone this repo and run uv sync to install the packages.

Refer to the documentation for a guideline how to use the scripts in this repo.

View on GitHub

The Streamlit app is divided into four sections,

Dashboard, this section shows the product price distribution, the most popular brands, GPUs, and storage.

Keyword Explorer, this section contains a basic keyword research tool based on N-gram frequencies.

Product Cloud, this section shows a 3D product name cluster based on K-Means clustering. The points are pre-computed using T-SNE dimensionality reduction, and the embedding model used to generate the text embeddings is the Nomic Text Embed.

Compare Price: In this section, you can enter a product name and it will show a comparison between the products in three different marketplaces, along with a statistical test (t-test).

How I Used Bright Data

As described in previous sections, I mainly used Bright Data’s Scraping Browser and Web Scraping API services.

Bright Data Scraping Browser excels at unlocking access to any website with its powerful unblocking and proxy features. Even though the LKPP web uses CloudFlare protection, with Scraping Browser, the scraping process runs smoothly. I used Playwright for scraping and the integration process is just as simple as changing a single line,

# from this
browser = await p.chromium.launch(headless=False, slow_mo=50)

# to this
browser = await p.chromium.connect_over_cdp("wss://AUTH_HERE@brd.superproxy.io:9222", slow_mo=50)

Now for the public marketplace data, namely Tokopedia and Lazada, Bright Data through their Web Scraping API provides an intuitive and convenient API for scraping data, without requiring us to write a custom script for scraping. This saves me a lot of time so I can focus on analyzing the data and creating the Streamlit app.

Prize Categories

Although I filled the hackathon category to the third prompt, I believe this project could fall into any of the categories.

Final Thoughts

This has been an interesting journey, especially how we can leverage web scraping data and GenAI to extract structured information from the web. Bright Data’s powerful scraping browser and convenient web scraping API allow me to quickly build and collect a large amount of data in a very short time. This allows me to shift my focus on delivering insights from the scraped data and making web scraping process a breeze. No more CAPTCHA and creating a custom script for popular website.

AI Systematic Literature Review with KawanPaper

Fahmi Noor Fiqri — Sun, 10 Nov 2024 07:18:03 +0000

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

What I Built

This is a conversational RAG app where all the RAG pipelines are entirely built in PostgreSQL procedures using PL/pgSQL!

The idea behind this app stems from my master's thesis work. I have to do systematic literature review and doing it manually is boring. So, I created this small app so I can just upload the full text paper and chat with it, create summaries, highlights, and key results. Massively streamlining the process of systematic literature review.

Of course, this app would work with any kind of data, we just need to change the system prompt a bit!😏

Key Features:

Summarize research papers (journal articles, conference papers, etc.)
Create highlights/key insights
Automatic processing using pgai Vectorizer
Chat with independent paper
Save multiple chat sessions

Initially I want to fully use Ollama, but pgai Vectorizer currently do not support Ollama, so I opted to use Open AI.

Demo

Demo video here

fahminlb33 / devto-timescale-pgai

KawanPaper

KawanPaper is your go-to app for chatting mainly with research papers (journal articles, conference papers, etc.)

Features:

PDF upload and automatic parsing
Generate key insights from research papers
Chat with a specific paper

Setup

Make sure you have an up to date Docker instalation and then clone this repo. We will divide the installation process into 3 parts, minio setup, database migration, and launching the app.

Configuration

Main configuration: copy the .env.example file to .env
Docker compose configuration: copy the docker.env.example to docker.env

These config have a predefined values to make it easier to deploy. Note there are some env vars that we need to define:

.env

VITE_MINIO_ACCESS_KEY
VITE_MINIO_SECRET_KEY

docker.env

OPENAI_API_KEY

You can add your Open AI key in the docker.env and for the minio credentials, we will create one in the next step.

Minio Setup

This is a new thing for me, back in the day we can…

View on GitHub

Tools Used

TimescaleDB as the main database to store the documents and its embeddings
pgai to access Open AI services in database
pgvector to store document embeddings
pgvectorscale to create indexes on the embeddings
pgai Vectorizer to automatically create embeddings from the uploaded papers

Prize Categories

Vectorizer Vibe, All the Extensions

Tech Stack

PostgreSQL (TimescaleDB)
Minio
Remix

So little tech stack for a RAG app😊 We can make it smaller by storing blobs in Postgres but I don't like that idea.

Conversational RAG in PL/pgSQL

In this SQL script I implemented two Postgres function to build the conversational RAG pipeline. This is the heart and soul of this app.

I got the idea from this LangChain tutorial.

CREATE FUNCTION contextualize_question(p_session_id VARCHAR(36), p_query TEXT) RETURNS TEXT

CREATE PROCEDURE chat_with_paper(p_session_id VARCHAR(36), p_chat_content TEXT)

I never thought I would be writing LLM chain/pipeline using SQL instead of Haystack, LangChain, or LlamaIndex, but here we are!

It's crazy what pgai could bring in the future for LLM in databases.

Final Thoughts

This has been an interesting journey because the idea of running LLM directly in database is really weird at first. But after learning it for the last 2 days, I found it really interesting and could possibly revolutionize data mining pipelines for non-AI engineers. I imagine data analysts and researchers could easily get insights from database systems without major changes to existing systems.

One of my favorite experiences in this project is I learned how to write Postgres procedures and functions using PL/pgSQL. It was a really interesting journey especially to write LLM apps that used to be written using LangChain, Haystack, or LammaIndex now I implemented it using pure PL/pgSQL to build a conversational RAG.

Recommend me a House🏡 RAG with Cloudflare AI🌤️

Fahmi Noor Fiqri — Sun, 14 Apr 2024 07:54:46 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I built a Q&A chat app for house recommendation. The idea is simple, you can ask using text or image about your dream house and the app will find the most relevant house listing stored on a Vectorize database. Currently, I have 100 house listing in Bogor, Indonesia.

And you read that right, you can upload an image to perform reverse image search or more accurately, a semantic search using an image embedding model😉

Demo

Try it! https://rumah-frontend.pages.dev

Example prompt:

Recommend me a house with 2 bedrooms
House near Bojong Gede

My Code

fahminlb33 / koderumah

House Recommendation RAG

Retrieval-Augmented Generation (RAG) for house recommendation.

This project uses multiple AI models to perform QnA style house search/recommendation using RAG method. It's a more advanced use case of CloudFlare AI which integrates many CloudFlare services and AI models.

@cf/meta/llama-2-7b-chat-int8
@cf/baai/bge-large-en-v1.5
@cf/unum/uform-gen2-qwen-500m
mobilenet_v3 through @tensorflow/tfjs

Try here: https://rumah-frontend.pages.dev/

Example propmpts:

Recommend me a house with 2 bedrooms
House near Bojong Gede

Requirements

Node v20.12.0
npm v10.5.0
Wrangler v3.0.0 or newer

You'll need CloudFlare Worker Pro Plan to be able to use Vectorize service which currently are in Beta.

Tech Stack

Vite
React
Radix UI
Tailwind CSS
zod
itty-router
jpeg-js
@tensorflow/tfjs
drizzle-orm
CloudFlare services used: Pages, Workers, Workers AI, Vectorize, D1, R2

Deployment

Step 1: Clone this repo, install the npm packages, and create the necessary databases, buckets, and indexes.

# clone the repo
git clone https://github.com/fahminlb33/koderumah.git
# install npm packages
npm install

# create D1 databases
npx wrangler

…

View on GitHub

Tech stack:

CloudFlare Workers, Pages, AI, Vectorize, D1, R2
Backend: itty-router, zod, drizzle-orm, tensorflow.js
Frontend: Remix, React, Radix UI

Journey

This is my third and final submission to the CloudFlare Hackathon. My previous submission was about creating a storybook and dev.to author recommendation, now I’m focusing on LLM and RAG for Q&A.

RAG: Retrieval-Augmented Generation.

Building the RAG pipeline

This time my idea was to build an AI assistant to give house recommendation based on text prompt. You can enter a prompt describing the house you want, for example, the number of bedrooms, bathrooms, etc. and then the model will give you house recommendations based on the house listing stored on the D1 database.

There are three parts that make up the RAG pipeline.

Query agent: this agent provides context or “memory” from earlier prompt, if exists. This produces a new “refined prompt,” hopefully with an added context from a previous chat.
Semantic search: the refined prompt is then fed to a text embedding model and a vector search is performed to a Vectorize index, returning the most relevant document containing the house listing.
Answer agent: using the retrieved documents as context, this agent will then summarize and generate a final response to the users.

Overall, it is the usual RAG pipeline you’ll see on many tutorials on the internet. But can we improve it?

Prompting by text is mainstream, what about image?

I found using text prompts to be effective, but I wanted to explore if using an image as a query could enhance the experience.

Currently, CloudFlare AI doesn’t have an image embedding model available. To solve this, I considered using a 3rd party service for image embedding. However, I recalled that TensorFlow has a JS version that could potentially run on a web worker.

Initially, I faced difficulties in the image decoding process with TensorFlow.js because it is designed mainly for browsers, which have built-in image decoding capabilities. Fortunately, you can decode an image using pure JS library such as jpeg-js and run a TensorFlow.js model in a CloudFlare worker.

BUT, it is slow. Really slow...

It takes about 5 seconds to perform a single image embedding. It is good enough for a prototype, but in the long run this will lead to bad UX. The bottleneck appears to be caused by workers needing to download a model and set up everything from scratch each time they run an image embedding process. Since each call to a Worker is isolated, I cannot cache the model for future inference.

Now that we have got the embedding of our image, we can continue with semantic search and summarize the retrieved documents. This will enable us to generate a conclusive answer.

Architecture Diagram

The models used are:

Multiple Models and Triple Task

Text Generation: @cf/meta/llama-2-7b-chat-int8
Text Summarization: @cf/facebook/bart-large-cnn
Text Embedding: @cf/baai/bge-large-en-v1.5
Image to Text: @cf/unum/uform-gen2-qwen-500m
Image Embedding: mobilenet_v3

What I Learned

Compared to my previous submission, this app is definitely more intricate, but fun otherwise. I don’t even have to use LangChain to build this RAG pipeline. Overall, this project shows that CloudFlare AI, especially the Text Generation model quality is quite good for building RAG apps. The only major problem I faced on this project is the model hallucinations in the query agent, causing the responses to be reformulated into a question, not a statement. Maybe my system prompt is not optimal yet.

The fact that we can also bring our own TensorFlow.js model to CloudFlare Worker is a major advantage, as it simplifies our system architecture and allows us to run nearly everything on CloudFlare Worker. But keep in mind the drawback I mentioned above😉

Also, big thanks to my friend @rasyidf for building the frontend app. I couldn’t do it without him.

Who's dev.to writer to follow?✍️ Ask CloudFlare AI

Fahmi Noor Fiqri — Sun, 14 Apr 2024 07:12:54 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

An app that gives you insight into a dev.to user’s posting/articles and allows you to determine if it aligns with your preference.

Demo

Try it! https://devtofollow.pages.dev

My Code

fahminlb33 / devtofollow

Dev.to Follow✍️

A little confused who's user to follow in dev.to for your newsletter?

This project uses an LLM to summarize and generate an insight about a user's post topics. Also, it can provide an insight about the user's posts and relevance to your prefereed topics, making it easy to choose which user's to follow for your blog feed. This project uses two models,

@cf/facebook/bart-large-cnn to summarize the post content
@hf/mistral/mistral-7b-instruct-v0.2 to paraphrase the post summaries and to generate post relevancy

Try here: https://devtofollow.pages.dev/

Requirements

Node v20.12.0
npm v10.5.0
Wrangler v3.0.0 or newer

Tech Stack

Vite
React
Mantine
CloudFlare services used: Pages, Workers AI

Deployment

# clone the repo
git clone https://github.com/fahminlb33/devtofollow.git

# change working directory
cd devtofollow

# install dependencies
npm install

# build repo
npm run build

# deploy to CloudFlare Pages
npm run deploy

After the site has been deployed, add Worker AI binding to the Pages…

View on GitHub

Journey

I started this app in a creative fever, nearing the end of the challenge. I originally wanted to submit just one, but then new ideas started coming at the last minute, and now here we are.

This time, my idea is to use LLM models to summarize a dev.to user posts and giving me insight about the key topics of his/her posts to determine whether his/her posts apply to my liking. This should help me pick which users to follow and align with my interests.

The process starts with using the dev.to API to get the latest articles posted by a certain dev.to username, then I scraped the article content and summarized it using a BART model. Then, Mistral 7b further summarizes this summary, and if provided, the app also suggests whether the topics in those articles align with your preference.

Models used:

Text Summarization: @cf/facebook/bart-large-cnn to summarize the post content
Text Generation: @hf/mistral/mistral-7b-instruct-v0.2 to paraphrase the post summaries and to generate post relevancy

Same as before, I built the web app using Vite, React, and Mantine and the backend using CloudFlare Page Functions.

What I Learned

In this app, I performed a web scraping using CloudFlare Worker and one part of it is to extract text from HTML. Most libraries available at npm usually require DOM manipulation to extract the text, but in this case, we don’t have access to that. Fortunately, CloudFlare Worker runtime has another solution for this, the HTMLRewriter. Originally, HTMLRewriter is intended to transform HTML, not for data extraction. But fortunately, we can use it for extraction. Granted, this is the first time I used the API, but it is surprisingly simple to use.

The future plan for this project is to integrate it with other CloudFlare services. For example, automatically scraping and summarizing an article using CRON triggers, and then sending it to an email or database. This way, we can have our own personalized newsfeed.

Create a storybook📚 using CloudFlare AI

Fahmi Noor Fiqri — Sat, 13 Apr 2024 09:24:23 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

An app to create a storybook/flipbook using LLM and stable diffusion models. You tell it a rough story and it will generate a story with illustrations.

Demo

Try it! https://storyflare.pages.dev/

Example prompt:

Story about photosynthesis for high school students
Story describing renewable energy for kids

My Code

fahminlb33 / storyflare

Storyflare🌤️

Create storybook from prompt.

This project uses an LLM to generate a story and a diffusion model to generate image illustrations. It's a very simplified use case of AI models to demonstrate how easy it is to integrate CloudFlare AI on apps. This project uses two models,

@hf/thebloke/mistral-7b-instruct-v0.1-awq to generate the story and extracting a suitable illustration description
@cf/stabilityai/stable-diffusion-xl-base-1.0 to generate the illustration

Try here: https://storyflare.pages.dev/

Example prompt:

Story about photosynthesis for high school students
Story describing renewable energy for kids

Requirements

Node v20.12.0
npm v10.5.0
Wrangler v3.0.0 or newer

Tech Stack

Vite
React
Mantine
CloudFlare services used: Pages, Workers AI

Deployment

# clone the repo
git clone https://github.com/fahminlb33/storyflare.git

# change workdir
cd storyflare

# install dependencies
npm install

# build repo
npm run build

# deploy to CloudFlare Pages
npm run deploy

After the site has been deployed, add Worker AI binding to the Pages instance.

View on GitHub

Tech stack:

CloudFlare Pages, Workers AI
Vite
React
Mantine

Journey

This is not the first time I worked with CloudFlare Workers, but this is the first time I tried the Workers AI services. I have to say the models are plenty and the inference time is quite fast too. With easy integration using Cloudflare AI SDK and easy deployment using wrangler, my experience with developing this app has been really fun.

The idea behind this app is to create a “benchmark” how easy it is to use CloudFlare AI compared to other services? So, I created the simplest app possible I can imagine, (1) create stories using LLM and (2) create illustrations using those stories.

To achieve this, I used two AI models:

Multiple Models

Text Generation: @hf/thebloke/mistral-7b-instruct-v0.1-awq to generate the story and extracting a suitable illustration description.
Text-to-Image: @cf/stabilityai/stable-diffusion-xl-base-1.0 to generate the illustration

I built the web app using Vite, React, and Mantine and the backend using CloudFlare Page Functions. Overall, the creation and integration process was smooth and I couldn’t appreciate enough how wrangler makes it easy to deploy the web app.

What I Learned

The CloudFlare platform has grown into a much larger and complete ecosystem, offering developers a complete set of tools to build and scale their apps. With great developer experience offered by wrangler, developing apps using CloudFlare is really a bliss.

However, I also faced some limitation with the Mistral model, which are the limited number of tokens. Sometimes the generated stories are incomplete, but we can solve this by tuning the prompt to include the maximum number of sentences per story.

Another room for improvement is to implement story continuation, in case the previous response is incomplete or trying different art style to make the illustration more appealing.

Redis Status Page, Redesigned

Fahmi Noor Fiqri — Mon, 29 Aug 2022 16:29:30 +0000

You might still remember my previous post when I created a status page using Blazor Server and Redis. In the previous post I mentioned one of the downsides of the implementation which is overeliance to LINQ and Redis.OM, caused by my naive approach to data modelling using Redis.

In this new version, I tried to maximize the use of Redis data structures (List, Set, and Hashes) to better store the service uptime data so it will be easier to store and query.

What's new?

The first version

In the first version, I use Redis.OM to store the data and LINQ to query and format the data. Using this approach the data storage and query quickly became complex, since I tried to model the data as it was a table.

Storing the data:

// save to redis using OM
var collection = _cnProvider.RedisCollection<MonitoringSnapshot>();
await collection.InsertAsync(new MonitoringSnapshot
{
    UnixTimestamp = timestamp.ToUnixSeconds(),
    ServiceName = serviceName,
    Healthy = healthy,
    Latency = latency
});

Not that bad, eh?

Querying the data:

// get collection
var collection = _cnProvider.RedisCollection<MonitoringSnapshot>();

// query all data
var query = collection
    .Where(x => x.UnixTimestamp > nowUnixEpoch)
    .ToList();
var timestamps = query
    .GroupBy(x => x.ServiceName)
    .First()
    .OrderBy(x => x.UnixTimestamp)
    .Select(x => DateTimeHelpers.FromUnixSeconds((long)x.UnixTimestamp))
    .ToList();
var serviceLatency = query
    .GroupBy(x => x.ServiceName)
    .ToDictionary(x => x.Key, y => y.OrderBy(i => i.UnixTimestamp).Select(p => p.Latency).ToList());

There's so many GroupBy and other commands, not only the querying process is a bit complex, but the stored data is also not easy to scan in RedisInsight.

The new version

In the new version, I tried to use Set, List, and Hash to store the data with my own key pattern. The result is much cleaner and easier data to query.

Storing the data:

// get today date
var timestampDate = timestamp.ToString("yyyy-MM-dd");

// save to redis using OM
var timestampKey = string.Format(TimestampKey, serviceName, timestampDate);
var latencyKey = string.Format(LatencyKey, serviceName, timestampDate);
var healthKey = string.Format(HealthKey, serviceName, timestampDate);

// get redis db
var db = _cn.GetDatabase();

// set current status
await db.HashSetAsync(ServiceLastStatusKey, serviceName, healthy);

// add to set
await db.SetAddAsync(ServicesSetKey, serviceName);

// add timestamp, health, and latency status
await db.ListRightPushAsync(timestampKey, DateTimeHelpers.ToUnixSeconds(timestamp));
await db.ListRightPushAsync(latencyKey, latency);
await db.ListRightPushAsync(healthKey, healthy);

Querying the data:

// query all data
var timestampKey = string.Format(TimestampKey, services.First(), nowDate);
var timestampValues = await db.ListRangeAsync(timestampKey);
var timestamps = timestampValues
    .Select(x => DateTimeHelpers.FromUnixSeconds(Convert.ToInt64(x)))
    .ToList();

// get latency data from all services
var latencyDict = new Dictionary<string, List<int>>();
foreach (var service in services)
{
    // get latency history
    var latencyKey = string.Format(LatencyKey, service, nowDate);
    var latencyHistory = (await db.ListRangeAsync(latencyKey))
        .Select(x => Convert.ToInt32(x))
        .ToList();

    // add to dict
    latencyDict.Add(service, latencyHistory);
}

Not only the query logic is much straightforward, the stored data is now much easier to read in RedisInsight. This is a major benefit since you can use other data visualization tools such as Grafana to visualize the collected data.

I've updated the code on my repository and you can simply clone and run it again!

fahminlb33 / RedisStatusPage

Status page for your microservice apps

RedisStatusPage

Status page for your next microservice backend apps!

Read on DEV.to

This app started as an idea to integrate to my other project, ritsu-pi, it's a Raspberry Pi home server project where you can deploy all kind of apps to a single RPi (or even a cluster). Redis Hackathon comes in just the right moment to give me an extra motivation to finish this project :)

This project is basically a Status Page (like Github Status, Azure Status, Atlassian Statuspage, or something similar) built on top of Blazor Server and Redis. Here you can define a "health check" and get reports when one of your service is down. Also it has a Discord webhook client that will send you a message when one of your service status has changed.

Monitor HTTP/TCP service uptime
Simple latency graph over time
Incident report when one of the services status has changed
…

View on GitHub

Status Page, with Redis

Fahmi Noor Fiqri — Mon, 22 Aug 2022 13:29:00 +0000

Overview of My Submission

Monitor HTTP/TCP service uptime
Simple latency graph over time
Incident report when one of the services status has changed
Discord webhook notification

Project video overview

Submission Category

MEAN/MERN Maverick

Language Used

C#/Blazor Server

Link to Code

fahminlb33 / RedisStatusPage

Status page for your microservice apps

RedisStatusPage

Status page for your next microservice backend apps!

Read on DEV.to

Monitor HTTP/TCP service uptime
Simple latency graph over time
Incident report when one of the services status has changed
…

View on GitHub

Random advice: Read as many resources before starting a hackathon project...

Here's one of bruh moment when I was almost finished working on this project.

Like many developers out there I usually work with SQL or document DB and in this project I also used Redis.OM to help me use Redis faster via LINQ APIs.

But then I checked out the Redis sample app, Redis Analytics Bitmaps demo.

Bruh... damn

I never thought of using many different keys and data structure to store my service monitoring data. Why I don't use Set with a many different part of the service and timestamp as key and simply query it using something like SCAN? Why I have to bother dealing with complicated LINQ queries when Redis may have a much cleaner alternative? I simply haven't learned Redis enough.

At that time I'm still thinking of modelling data as table in Redis, and ignores the fact that Redis is different from SQL database and document DB like Mongo and I was stuck with that mindset for quite some time.

After I realized there are many more alternatives to model data in Redis, I felt I have to rewrite my project to embrace Redis data structures.

While I'm working on the improved version of this project, the current implementation of this project is already finished and working properly, you can try to run it right now :D and I will try to rewrite it maybe over the weekend, but I don't know when I will have time to finish it before the hackathon ends.

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Automate Notion Kanban Report to MongoDB

Fahmi Noor Fiqri — Sun, 26 Dec 2021 16:13:38 +0000

Overview of My Submission

I use Notion Kanban extensively to track my daily task and at the end of every month, I'll create a report to get a summary of my work for a whole month. This way I can manage my work-life balance more efficiently.

At first it was fun to setup the kanban board and create my first report, but doing it repeatedly for every month is kinda cumbersome. So I wanted to automate this process and create a simple dashboard that I can visit anytime.

MongoDB Hackathon came in just the right time for me to explore serverless technology to automate this reporting task and store the data into a database.

This project aims to automate the process of creating reports from Notion kanban board and then store it into MongoDB Serverless Instance.

Submission Category

Automation Innovation

Link to Code

fahminlb33 / FahmiNotionAutomation

This is my attempt at MongoDB Hackathon

Notion Kanban Automation

This repo contains Azure Functions project which will automatically reads all cards from Notion database (in this case kanban board) and then store it into MongoDB Serverless Instance. Not only that, my kanban has several properties to make it more informative like story points, priority, and category, making it somwehat like a JIRA board.

The Idea

At first it was fun to setup the kanban board and create my first report, but doing it repeatedly every month is cumbersome. So I wanted to automate this process and create a simple dashboard that I can visit anytime.

MongoDB Hackathon came in just the right time for…

View on GitHub

Additional Resources / Info

You can access the API and the dashboard from the link in my repo.

Tech

Service Uptime Monitor using Github Actions

Fahmi Noor Fiqri — Thu, 03 Sep 2020 10:01:00 +0000

My Workflow

I've been working in a company for about 1 year now. We have a private cloud, but it's not very reliable. Sometimes our container will suddenly stopped or having our Gitlab EE unavailable, even in busy hour.

After today's daily stand up, one of my coworker said it will be fun to have a service to monitor our services, to tell when was the last time the DevOps team messed up the containers. Like in the "days without tricks meme."

So I think "why not?"

Here I have created a workflow to check for my service uptime, runs every 5 minutes on Github Actions. This action will execute a NodeJS app and updates a file to report latest up/downtime. This script will make a HTTP request to the service and save the HTTP status to a JSON file.

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

name: Node.js CI

on:
  workflow_dispatch:
  schedule:
    - cron: "*/5 * * * *"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - run: npm install
    - run: npm start
    - name: Commit and push if changed
      run: |
        git add .
        git diff
        git config --global user.email "github-action-bot@example.com"
        git config --global user.name "GitHub Action Bot"
        git commit -m "Updated incident" -a || echo "No changes to commit"
        git push

fahminlb33 / statuspage-js

Monitor my squad container status

Additional Resources / Info

For the HTML I've used Matt Smith's countdown template from https://codepen.io/AllThingsSmitty/pen/JJavZN.