DEV Community: Rocky LIU Yan

AI Elements: PromptInput Component Design and Testing Framework

Rocky LIU Yan — Tue, 30 Dec 2025 05:49:04 +0000

Within the broader context of the "AI Elements and Testing Library Core Knowledge System," the sources categorize the PromptInput component across three dimensions: design philosophy, functional architecture, and user-centric testing strategies.

AI Elements Perspective: A Highly Flexible Compound Interaction System From the perspective of AI Elements, PromptInput is not merely a simple text box but a complex form system specifically designed for Large Language Model (LLM) interactions. • Compound Component Pattern: This component utilizes a flexible composition of sub-components, including PromptInputTextarea, PromptInputSubmit, and PromptInputAttachments. This allows developers to customize UI layouts for diverse needs, such as chatbots or code generation tools. • Dual-Mode State Management: The sources highlight support for both "self-managed" (local state) and "provider-managed" (lifted state) modes . This design allows it to function as a standalone component or coordinate with complex external business logic (like model selectors or web search toggles) via the PromptInputProvider . • Addressing AI-Specific Pain Points: ◦ IME Composition Handling: To address issues with input methods like Japanese (Issue #21), the component identifies the isComposing state to prevent accidental submissions before a character is finalized . ◦ Race Condition Prevention: When processing asynchronous file conversions (Blob to Data URL), the system prevents data loss by capturing the current text and resetting the form immediately .
Testing Library Perspective: Semantic and Accessibility-Based Validation The core principle of the Testing Library is that "tests should simulate how users interact with the code as much as possible" . Applying this to PromptInput, the sources emphasize the following validation logic: • Prioritize Semantic Queries: Testing should follow a query hierarchy. ◦ getByRole: This is the preferred method for locating buttons (submit, attachments) and inputs, ensuring the UI is friendly to assistive technologies like screen readers . ◦ getByLabelText: Since PromptInput is essentially a form system, locating the input via its label is the best way to simulate real user behavior . • Asynchronous Behavior Handling: Given that AI responses involve streaming states or file uploads, tests utilize asynchronous APIs like findBy... or waitFor to track DOM changes, such as the submit button icon switching from "loading" to "send" . • Avoid Non-Semantic Queries: The sources explicitly discourage testing via classes or IDs (e.g., querySelector) because these are invisible to the user. testId should only be used as a last resort .
The Intersection: Test-Driven Interaction Quality The PromptInput test suite (e.g., prompt-input.test.tsx) represents the convergence of these two knowledge systems . • Full Scenario Coverage: Tests go beyond basic rendering to cover advanced interactions like file validation (max count, size, type limits), drag-and-drop (global and local), and pasting files from the clipboard . • State and Icon Mapping: The PromptInputSubmit component automatically switches icons based on the AI SDK status (e.g., submitted maps to a loading animation, while streaming maps to a stop square) . Tests verify the state machine by asserting the correct roles or text are present. • Environment Mocking: To function in a test environment, browser-specific APIs—such as the Web Speech API (for voice recognition buttons) and the Clipboard API—must be mocked .

Analogy for Understanding: If AI Elements (PromptInput) is a high-performance off-road vehicle equipped with complex power distribution systems (dual-mode state) and specialized parts for rough terrain (IME handling, file systems), then the Testing Library is a rigorous vehicle inspection standard. It doesn't care about the specific screw sizes under the hood (internal implementation/IDs/Classes); it only cares if the car moves forward when you hit the gas (user interaction) and if the dashboard is legible to everyone, including those with visual impairments (accessibility queries). Only by passing this "simulated real-world driving" test is the vehicle considered safe and reliable.

https://github.com/vercel/ai-elements/blob/f0625b5ef32564067292661341f63cfe2d7432cb/packages/elements/src/prompt-input.tsx#L618

https://ai-sdk.dev/elements/examples/chatbot

https://deepwiki.com/vercel/ai-elements/4.1-promptinput-component

https://testing-library.com/docs/queries/about/#screen

Ingesting Data in F# with Aether: A Practical Guide to Using Lenses, Prisms, and Morphisms

Rocky LIU Yan — Wed, 18 Dec 2024 08:49:08 +0000

In the world of functional programming, dealing with immutable and deeply nested data structures can quickly become cumbersome. Without the right tools, these data structures require complex, repetitive code for accessing and modifying their values. Aether is a powerful .NET library that addresses these challenges by providing Lenses, Prisms, and Morphism tools to streamline data manipulation. This guide will walk you through the basics of Aether, including how to use its key concepts effectively, along with practical examples to get you started.

Why Aether?

Aether simplifies working with immutable data and deeply nested structures. It provides a set of tools that help you:

Access and modify deeply nested data with minimal boilerplate code.
Work with uncertain or variant data types safely (e.g., Option or Result).
Create more declarative and readable code.

By leveraging Lenses, Prisms, and Morphism, Aether lets you focus on the logic of your application without being bogged down by repetitive data access patterns.

Installation

To start using Aether in your .NET project, simply install the package via NuGet:

dotnet add package Aether

Key Concepts in Aether

Before diving into examples, let’s briefly explain the core concepts you'll be working with in Aether:

Lenses: Lenses allow you to focus on a specific part of a data structure (like a field in a tuple or a record). They provide functions for getting and setting values within a structure without needing to manually handle the nested fields.
Prisms: Prisms are used to handle data that can have multiple shapes, like Option or Either types. They offer a safe way to access values inside these types, while handling the possibility of absence or error cases gracefully.
Morphism: Morphism refers to transformations that allow you to map or modify values across different data structures or types. It's useful for applying a function to elements inside a collection or converting between different shapes of data.

Example Code

Here’s a practical example of using Aether to manipulate various data types in a functional way:

open Aether
open Aether.Operators

// Define a tuple type for Point
type Point = float * float

// Create a Point tuple (X and Y coordinates)
let p = (10.0, 20.0) // X=10, Y=20

// Use fst_ lens to set and get the first element of the Point tuple (X coordinate)
let newX = 5.0
let updatedP = Optic.set fst_ newX p // Updated Point: (5.0, 20.0)
let xValue = Optic.get fst_ updatedP // Get the updated X coordinate: 5.0

// Convert a list to an array
let list = [1; 2; 3]
let array = fst List.array_ list // Using the first function to convert to an array

printfn "array = %A" array

// Convert the array back to a list
let list' = snd List.array_ array // Using the second function to convert back to a list

printfn "list' = %A" list'

// Create a list of integers
let intList = [1; 2; 3]

// Use List.head_ prism to get the first element of the list
let headValue = Optic.get List.head_ intList // 1

// Use List.tail_ prism to get the remaining part of the list
let tailList = Optic.get List.tail_ intList // [2; 3]

printfn "tailList = %A" tailList

// Create a Map
let map = Map.ofList ["a", 1; "b", 2; "c", 3]

// Use Map.key_ prism to get the value for a specific key
let keyValue = Optic.get (Map.key_ "b") map // 2

// Update a specific key's value in the Map
let updatedMap = Optic.set (Map.key_ "b") 5 map // map ["a", 1; "b", 5; "c", 3]

printfn "updatedMap = %A" updatedMap

// Define an Option type
let optionValue = Some "Hello World"

// Use Option.value_ prism to get the value inside the Option
let valueOptic = Optic.get Option.value_ optionValue // "Hello World"
printfn "The value is: %A" valueOptic

// Update the value inside the Option
let updatedOptionValue = Optic.set Option.value_ "Hello Aether!" optionValue // Some "Hello Aether!"

printfn "The updated value is: %A" updatedOptionValue

Output

array = [|1; 2; 3|]
list' = [1; 2; 3]
tailList = Some [2; 3]
updatedMap = map [("a", 1); ("b", 5); ("c", 3)]
The value is: Some "Hello World"
The updated value is: Some "Hello Aether!"

Explanation of Key Operations

fst_ and snd_: These are lenses that focus on the first and second elements of a tuple, respectively. With these lenses, you can access or modify specific parts of a tuple without breaking its structure.
List.head_ and List.tail_: These are prisms that focus on the head (first element) and tail (remaining elements) of a list. They are useful for working with lists where the first element may be present or absent.
Map.key_: This is a prism used to focus on a specific key in a Map. It allows you to access or update values associated with that key in a functional way.
Option.value_: This is a prism used to focus on the value inside an Option (such as Some or None). It enables you to safely access or update the value, while handling cases where the value might be absent.

Why Use Aether?

Aether offers a clean, functional approach to managing data in .NET, especially when you're dealing with complex or immutable structures. Here are some reasons to consider using Aether:

Clarity and Declarative Code: Aether's use of Lenses, Prisms, and Morphisms allows for more readable and declarative code when manipulating data structures.
Less Boilerplate: Instead of writing manual functions for accessing and updating nested data, you can use Aether's built-in tools to simplify the process.
Strong Functional Principles: Aether aligns well with functional programming principles, allowing you to handle immutable data and complex transformations in a more predictable way.

Real-World Use Cases

While the examples above are simple, Aether shines in more complex scenarios. For instance, imagine you have deeply nested JSON-like data or a complex domain model where accessing and modifying specific fields is error-prone and repetitive. Aether’s tools help you focus on the task at hand while abstracting away the boilerplate code involved in data manipulation.

Conclusion

Aether provides a concise and functional way to manipulate data in .NET, especially when dealing with complex or immutable data structures. By utilizing Lenses, Prisms, and Morphism, you can make your code more readable, maintainable, and less error-prone. If you often find yourself writing repetitive code to access or update data, Aether might be the right tool to simplify your workflow.

To get the most out of Aether, explore the official documentation and check out some advanced patterns. If you're working with other functional libraries like FsToolkit.ErrorHandling, Aether integrates seamlessly with them to provide even more flexibility.

Happy coding!

.NET Cross-Platform Web Desktop App Frameworks as Electron Alternatives

Rocky LIU Yan — Wed, 18 Dec 2024 06:07:58 +0000

The main goal is to replace Electron. After trying many similar projects, I ultimately selected two representative open-source projects to introduce to everyone.

Comparative Analysis: OutSystems WebView vs Photino.Blazor

When developing modern desktop applications, developers often choose WebView technology to embed web pages or use web technologies to build applications. This article compares two open-source projects: OutSystems WebView and Photino.Blazor, both of which provide the ability to embed web content in desktop applications, but differ in their implementation approaches and target platforms.

1. Project Background

OutSystems WebView
- GitHub Link: OutSystems WebView
- Description: OutSystems WebView is a component based on the .NET technology stack, designed to embed web pages in desktop applications. It provides a cross-platform WebView implementation that supports both Windows and macOS. Its primary goal is to enable developers to easily display and interact with web content within desktop applications while integrating with native functionalities.
Photino.Blazor
- GitHub Link: Photino.Blazor
- Description: Photino is a lightweight desktop application framework that allows developers to build native applications using web technologies (HTML, CSS, JavaScript). Photino.Blazor is a support library for integrating Blazor (a .NET-based web framework) into Photino, enabling developers to build cross-platform desktop applications. Unlike traditional frameworks like Electron or NW.js, Photino uses a native WebView implementation, aiming to provide a smaller, more efficient desktop application.

2. Technical Comparison

Feature	OutSystems WebView	Photino.Blazor
Framework Support	.NET (cross-platform, supports macOS and Windows)	Blazor (based on .NET)
Main Functionality	Embed web content in desktop applications, support for native code integration	Build cross-platform native desktop apps using web technologies with Blazor
Platform Support	Windows, macOS	Windows, macOS, Linux
Performance	Depends on Chromium or WebKit engines, relatively heavy	Lightweight, based on native WebView, optimized for performance
Development Focus	Primarily for enterprise-level applications and large projects	Ideal for developers who want to use Blazor for cross-platform apps
External Dependencies	Depends on .NET and WebView components	Depends on .NET Core and WebView (Chromium or WebKit)
User Interface	Flexible, can use web technologies (HTML/CSS/JS)	Fully integrated with Blazor, supports UI design with C# and HTML
Open Source License	MIT License	MIT License

3. Features and Characteristics

OutSystems WebView
- Native Functionality Integration: The project is designed to embed web content in native applications, enabling developers to access native OS functionalities such as file systems, notifications, and system resources.
- Cross-Platform Support: Supports Windows and macOS, leveraging .NET as the development framework, making it easier for enterprise developers to integrate WebView into existing tech stacks.
- Enterprise-Level Applications: OutSystems WebView is more suited for enterprise-level applications and projects that require extensive integration with native functionality.
Photino.Blazor
- Lightweight: Compared to Electron and other traditional frameworks, Photino is designed to offer a smaller, faster solution for desktop application development. It has a much smaller footprint and lower memory usage, making it ideal for lightweight desktop applications.
- Blazor Support: Through Photino.Blazor, developers can directly use Blazor to build desktop applications, which is particularly attractive for C# developers. Blazor’s component-based approach allows developers to design UIs using familiar technologies and seamlessly integrate server-side logic.
- Platform Support: In addition to Windows and macOS, Photino.Blazor supports Linux, expanding its cross-platform capabilities.

4. Use Cases

OutSystems WebView:
- Suitable for development teams already using OutSystems or .NET-based tech stacks.
- Ideal for enterprise-level applications that require strong native functionality and stability.
- Perfect for embedding existing web applications or web pages into desktop environments.
Photino.Blazor:
- Perfect for developers looking to build cross-platform desktop applications using Blazor and .NET technologies.
- Well-suited for lightweight, performance-focused desktop applications that don’t require large frameworks like Electron.
- Ideal for rapidly developing desktop applications that need to run on Windows, macOS, and Linux.

5. Pros and Cons Analysis

OutSystems WebView:
- Pros:
  - Strong support for native functionality and deep integration.
  - Enterprise-level support and easy integration with .NET environments.
  - Good cross-platform support, especially for embedding web applications into desktop environments.
- Cons:
  - Heavier compared to Photino, relying on more external libraries.
  - Performance may not be as lightweight as Photino.
Photino.Blazor:
- Pros:
  - Lightweight, ideal for building fast and efficient applications.
  - Perfectly integrated with Blazor, making it a great choice for C# developers.
  - Shorter development cycles, enabling quick deployment of cross-platform desktop applications.
- Cons:
  - Compared to more established solutions like Electron, its community support and ecosystem are relatively smaller.
  - More suited for lightweight applications; complex applications may require more flexibility than what Photino offers.

6. Conclusion

OutSystems WebView is better suited for developers who need strong native functionality integration, cross-platform support, and enterprise-grade applications. It relies on the .NET tech stack and offers deep integration with native OS features, making it ideal for large-scale, stable projects.
Photino.Blazor is better for developers who want to quickly develop lightweight, cross-platform desktop applications using Blazor and .NET technologies. Its small size and fast performance make it ideal for building rapid, efficient applications without the overhead of heavier frameworks like Electron.

The choice between the two frameworks depends on the specific requirements of the project, the existing technology stack, and the developer’s preferred tools. If the goal is to build an enterprise-grade, highly integrated application with native features, OutSystems WebView would be the better choice. On the other hand, if you are looking for a lightweight, performant solution for developing cross-platform desktop apps with Blazor, Photino.Blazor is a promising option.

Implementing Full Transparency No Frame and Acrylic Effects in Avalonia UI

Rocky LIU Yan — Wed, 18 Dec 2024 05:11:41 +0000

Avalonia UI offers powerful capabilities for creating modern, visually appealing applications with transparency and acrylic (blur) effects. In this post, we'll explore how to implement these effects in your Avalonia applications.

Understanding the Basics

There are two main types of transparency effects we can achieve in Avalonia UI:

Acrylic (blur) effect - similar to frosted glass
Full transparency - completely transparent window frame

Implementation

Acrylic (Blur) Effect

To create a window with an acrylic blur effect, use the following XAML code:

<Window ExtendClientAreaChromeHints="NoChrome"
        TransparencyLevelHint="AcrylicBlur"
        Background="Transparent"
        ExtendClientAreaToDecorationsHint="True">
    <!-- Your content here -->
</Window>

Full Transparency

For a fully transparent window, modify the TransparencyLevelHint:

<Window ExtendClientAreaChromeHints="NoChrome"
        TransparencyLevelHint="Transparent"
        Background="Transparent"
        ExtendClientAreaToDecorationsHint="True">
    <!-- Your content here -->
</Window>

Key Properties Explained

ExtendClientAreaChromeHints="NoChrome": Removes the default window chrome
TransparencyLevelHint: Specifies the type of transparency
- AcrylicBlur: Creates a frosted glass effect
- Transparent: Makes the window fully transparent
Background="Transparent": Sets the window background to transparent
ExtendClientAreaToDecorationsHint="True": Extends the client area to include window decorations

Best Practices

Consider performance implications when using transparency
Test on different operating systems as effects may vary
Ensure content remains readable with transparent backgrounds
Use appropriate contrast for better user experience

Conclusion

Implementing transparency and acrylic effects in Avalonia UI is straightforward and can significantly enhance your application's visual appeal. Choose the appropriate effect based on your application's needs and performance requirements.

Remember that these effects might behave differently across various platforms and operating systems, so always test thoroughly on your target platforms.

avalonia #ui #dotnet #desktop #development

Unlocking High-Performance AI Computing with F#: A Comprehensive Guide

Rocky LIU Yan — Tue, 03 Dec 2024 01:36:07 +0000

In the world of scientific computing, performance and efficiency are crucial. Whether you’re dealing with large datasets, complex calculations, or high-performance tasks, finding the right tool for the job can make all the difference. Today, we explore how F# stands out as a powerful alternative, combining the simplicity of Python with the performance of .NET, making it an excellent choice for specific high-performance computing tasks.

Why F#? Understanding the Landscape

When it comes to scientific computing, you often have to balance ease of use with performance. Let’s break down the most common tools used:

Python: Loved for its simplicity and readability, Python is a go-to language for many. However, it can struggle with performance, especially in CPU-bound tasks, due to the Global Interpreter Lock (GIL).🐍
C++: This language is known for its speed and control, making it perfect for performance-critical applications. But with its steep learning curve and complex syntax, it’s not always the easiest to work with.📈

Now, where does F# come into play?

F# blends the best of both worlds. It combines Python's straightforward syntax with the speed and efficiency of the .NET ecosystem, making it ideal for performance-sensitive applications. 🚀
It’s cross-platform, statically typed, and supports functional programming, making it easier to write clean, efficient, and maintainable code.✨

Though Python and C++ are still the go-to choices for most projects, F# offers distinct advantages for specific use cases, particularly in scientific and numerical computing.

Key Features of F# That Set It Apart

So, why should you consider F# for your next project? Let’s take a closer look at its core features:

1. Familiar Syntax

F# has a syntax that feels familiar to Python developers, making it easy to pick up, especially for those who prefer clean, readable code. It also supports interactive development (REPL), allowing for a seamless, exploratory coding experience.💻

2. Strong Typing & Functional Programming

One of F#'s biggest strengths is its strong, static typing, which helps catch errors early in the development process. Combined with its emphasis on functional programming, F# is ideal for tasks like mathematical modeling and data analysis, where maintaining accuracy and clarity is key.🧑‍💻

3. Integration with .NET Ecosystem

The .NET ecosystem offers an incredibly powerful set of tools that can elevate your development experience:

Python.NET: F# can seamlessly integrate with Python libraries, allowing you to reuse your existing Python code and libraries. 🔗
ML.NET and ONNX: These tools help accelerate machine learning tasks, enabling high-performance inference for models, even in resource-constrained environments.⚡
Gradio.NET: If you're building interactive user interfaces, Gradio.NET allows you to quickly create cross-platform UIs that are both functional and user-friendly.🎨

While F# has many benefits, it’s important to note that its ecosystem is still growing, and may not be as extensive as Python’s or C++’s. But for performance-critical and specialized tasks, it’s hard to beat.

How to Migrate to F# – Step by Step

If you’re considering migrating from Python to F#, here are a few strategies to make the transition smoother:

1. Leverage Python.NET for a Gradual Migration

You don’t need to abandon your Python codebase to start using F#. With Python.NET, you can call Python code from F# without breaking your existing projects. Start by migrating performance-sensitive modules and gradually transition your code as you get more comfortable with F#.🔄

2. Boost Performance with ML.NET and ONNX

For tasks like machine learning inference, F# integrates smoothly with ML.NET and ONNX. These tools can replace Python-based bottlenecks, improving performance significantly—ideal for edge devices or real-time applications.⚡

3. Build Cross-Platform UIs with Gradio.NET

If you’ve been using Python’s Gradio to build UIs, you’ll love Gradio.NET. It allows you to quickly create interactive interfaces that run seamlessly across different platforms, making it easy to showcase your work with minimal effort.🎯

Code Examples: F# in Action

Here’s a look at some real-world applications of F# in scientific computing and AI:

1. Calling Python Libraries with Python.NET

With Python.NET, you can call Python libraries directly from F#, making it easy to integrate Python’s rich ecosystem into your F# projects.

open Python.Runtime
PythonEngine.Initialize()
let numpy = Py.Import("numpy")
let array = numpy.array([| 1.0; 2.0; 3.0 |])
printfn "Numpy Array: %A" array

Explanation: This allows you to seamlessly use Python libraries within F#, enabling a gradual migration of your Python code without losing functionality.

2. Inference with ML.NET and ONNX

For high-performance machine learning, ML.NET and ONNX are excellent choices. Here’s an example of how to load a pre-trained ONNX model and perform inference:

open Microsoft.ML
let mlContext = MLContext()
let model = mlContext.Model.Load("model.onnx")
printfn "Model loaded successfully."

Explanation: This simple code snippet showcases how easy it is to leverage ONNX models for high-performance tasks using F#.

3. Building a Simple Gradio.NET Interface

If you want to quickly build interactive UIs, Gradio.NET is an excellent tool. Here’s how you can create a simple text-based interface in no time:

open Gradio
let greet name = sprintf "Hello %s" name
gr.Interface(greet, "text", "text").Launch()

Explanation: This code demonstrates how easy it is to create a functional, cross-platform interface in F# using Gradio.NET.

Final Thoughts & Action Plan

F# is a powerful, versatile tool that bridges the best of Python’s ease of use with the performance of the .NET ecosystem. It’s especially well-suited for high-performance computing, data analysis, and machine learning tasks, but its ecosystem is still smaller compared to Python or C++.

Action Plan:

For Beginners: Start by integrating Python.NET to reuse your existing Python code. Gradually explore F# as you become more comfortable.🌱
For Developers: Dive into F# and the .NET toolchain for performance-critical applications and complex scientific tasks.🛠️
Explore Resources: Check out the F# documentation and explore libraries like ML.NET and Gradio.NET for more examples.📚
Pro Tip: Begin with small-scale experiments and evaluate F#'s effectiveness before scaling it up for larger projects.⚡

This blog article is designed to provide a clear, engaging, and actionable introduction to using F# for scientific computing. By blending accessible language with technical depth, it aims to both inform and inspire developers to consider F# for their next high-performance project.

How to Use the `ImmutableArray.Builder` Extension Method `ToFrozenDictionary` to Create Efficient Immutable Dictionaries

Rocky LIU Yan — Mon, 09 Sep 2024 01:48:03 +0000

ImmutableArray<T>.Builder is a class in .NET designed for building immutable arrays (ImmutableArray<T>). It provides an efficient way to construct immutable arrays without repeatedly creating new instances. In .NET 8, you can use the ToFrozenDictionary extension method to build a FrozenDictionary from an ImmutableArray<T>.Builder.

The ToFrozenDictionary extension method can be used to convert elements from an ImmutableArray<T>.Builder instance into an immutable FrozenDictionary<TKey, TValue>. This method is highly efficient for dictionaries that need frequent read access and will not be modified afterward.

Usage

Below is an example of how to use the ToFrozenDictionary extension method to convert an ImmutableArray<T>.Builder into a FrozenDictionary:

using System;
using System.Collections.Generic;
using System.Collections.Immutable;
using System.Collections.Frozen;

class Program
{
    static void Main()
    {
        // Create an ImmutableArray Builder
        var builder = ImmutableArray.CreateBuilder<KeyValuePair<string, int>>();
        builder.Add(new KeyValuePair<string, int>("apple", 1));
        builder.Add(new KeyValuePair<string, int>("banana", 2));
        builder.Add(new KeyValuePair<string, int>("cherry", 3));

        // Use ToFrozenDictionary method to convert Builder to FrozenDictionary
        FrozenDictionary<string, int> frozenDict = builder.ToFrozenDictionary();

        // Access elements in FrozenDictionary
        Console.WriteLine(frozenDict["apple"]);   // Output: 1
        Console.WriteLine(frozenDict["banana"]);  // Output: 2
        Console.WriteLine(frozenDict["cherry"]);  // Output: 3
    }
}

Example Explanation

Create an ImmutableArray<T>.Builder instance: Create a Builder instance for an ImmutableArray and add key-value pairs to it.
Call the ToFrozenDictionary method: Use the ToFrozenDictionary extension method to convert the builder instance into a FrozenDictionary<TKey, TValue>. This method converts the content of the ImmutableArray into an immutable dictionary.
Access the FrozenDictionary: The FrozenDictionary provides quick read access, making it suitable for scenarios involving frequent lookups.

Using Custom Key Selector and Equality Comparer

You can specify a custom key selector and an equality comparer when using ToFrozenDictionary:

using System;
using System.Collections.Generic;
using System.Collections.Immutable;
using System.Collections.Frozen;

class Person
{
    public required string Name { get; set; }
    public int Age { get; set; }
}

class Program
{
    static void Main()
    {
        var builder = ImmutableArray.CreateBuilder<Person>();
        builder.Add(new Person { Name = "Alice", Age = 30 });
        builder.Add(new Person { Name = "Bob", Age = 25 });
        builder.Add(new Person { Name = "Charlie", Age = 35 });

        // Convert Builder to FrozenDictionary using custom key selector and equality comparer
        FrozenDictionary<string, Person> frozenDict = builder.ToFrozenDictionary(
            person => person.Name,  // Key selector
            person => person);      // Value selector

        // Access elements in FrozenDictionary
        Console.WriteLine(frozenDict["Alice"].Age); // Output: 30
        Console.WriteLine(frozenDict["Bob"].Age);   // Output: 25
    }
}

Summary

Using ImmutableArray<T>.Builder and the ToFrozenDictionary method, you can efficiently create an immutable and fast-access dictionary, particularly useful in scenarios involving frequent reads but no further modifications to the data structure.

Introducing F# with Semantic Kernel: Simplifying AI App Development with the Pipeline Pattern

Rocky LIU Yan — Thu, 05 Sep 2024 07:15:39 +0000

This blog base from C# version https://github.com/microsoft/semantic-kernel/blob/main/dotnet/samples/GettingStarted/Step8_Pipelining.cs

F# code is here https://github.com/rocklau/fsharpPlayground

Introducing F# with Semantic Kernel: Simplifying AI App Development with the Pipeline Pattern

As developers, we are continuously looking for tools and frameworks that can help us streamline our workflows and build efficient applications. In the realm of AI app development, Microsoft's Semantic Kernel (SK) has emerged as a powerful framework to simplify the integration of AI capabilities into applications. Coupling this with the functional programming prowess of F#, we can create robust, maintainable, and scalable AI solutions. Today, we'll explore how to harness the pipeline pattern in F# with SK to develop AI apps more easily.

Why F# and Semantic Kernel?

F# is a functional-first programming language that empowers developers to write concise, expressive, and high-performance code. It shines in scenarios requiring complex data manipulations, asynchronous programming, and domain-specific languages (DSLs).

Semantic Kernel, on the other hand, is a developer kit from Microsoft designed to enable rapid embedding of AI functionalities within applications. It abstracts many complexities associated with AI model integration and provides a range of tools for building intelligent systems effortlessly.

Combining F# with Semantic Kernel allows us to leverage the pipeline pattern, a well-known functional programming construct, to process data through a sequence of operations seamlessly. Let's delve into the practical implementation of this approach.

Implementing the Pipeline Pattern

Here's a step-by-step guide on how to implement a simple pipeline pattern using F# and Semantic Kernel.

1. Define Custom Types and Functions

First, we set up our custom types and essential functions. We define a JsonValue type to represent different JSON structures and a JsonSchema type for schema validation.

type JsonValue =
    | JsonObject of Map<string, JsonValue>
    | JsonArray of JsonValue list
    | JsonString of string
    | JsonNumber of float
    | JsonBool of bool
    | JsonNull

type JsonSchema =
    | SchemaObject of Map<string, JsonSchema>
    | SchemaArray of JsonSchema
    | SchemaString
    | SchemaNumber
    | SchemaBool
    | SchemaNull
    | SchemaRequired of JsonSchema

Next, we define a context type and a result type to handle the outcomes of our operations:

type Context = { Input: JsonElement }
type Result<'T> =
    | Success of 'T
    | Failure of string

2. JSON Value Conversion and Validation

We then create functions to convert JSON elements to our JsonValue types and validate JSON against schemas:

let rec toJsonValue (jsonElement: JsonElement): JsonValue =
    match jsonElement.ValueKind with
    | JsonValueKind.Object ->
        jsonElement.EnumerateObject()
        |> Seq.map (fun prop -> prop.Name, toJsonValue prop.Value)
        |> Map.ofSeq
        |> JsonObject
    | JsonValueKind.Array ->
        jsonElement.EnumerateArray()
        |> Seq.map toJsonValue
        |> List.ofSeq
        |> JsonArray
    | JsonValueKind.String -> JsonString (jsonElement.GetString())
    | JsonValueKind.Number -> JsonNumber (jsonElement.GetDouble())
    | JsonValueKind.True -> JsonBool true
    | JsonValueKind.False -> JsonBool false
    | JsonValueKind.Null -> JsonNull
    | _ -> failwith "Unsupported JSON value kind"

let rec validateJson (schema: JsonSchema) (json: JsonValue): bool =
    match schema, json with
    | SchemaObject properties, JsonObject obj ->
        properties |> Map.forall (fun key valueSchema ->
            match obj.TryFind key with
            | Some value -> validateJson valueSchema value
            | None -> valueSchema <> SchemaRequired _)
    | SchemaArray itemSchema, JsonArray items ->
        items |> List.forall (validateJson itemSchema)
    | SchemaString, JsonString _
    | SchemaNumber, JsonNumber _
    | SchemaBool, JsonBool _
    | SchemaNull, JsonNull -> true
    | SchemaRequired innerSchema, value -> validateJson innerSchema value
    | _ -> false

3. Creating Contexts and JSON Operations

We create functions to build contexts and perform JSON operations like addition, multiplication, and squaring:

let createContextWithNewValue newValue =
    let json = JsonDocument.Parse($"{{ \"value\": {newValue} }}").RootElement
    { Input = json }

let jsonOperation opFunc (context: Context) : Result<Context> =
    try
        let value = context.Input.GetProperty("value").GetInt32()
        let newValue = opFunc value
        Success (createContextWithNewValue newValue)
    with
    | ex -> Failure ex.Message

let addOne = jsonOperation ((+) 1)
let multiplyByTwo = jsonOperation ((*) 2)
let square = jsonOperation (fun x -> x * x)

4. Mapping Functions and Defining the Pipeline

We map function names to actual functions and define our pipeline function which processes data through these functions:

let functionMap =
    [ "addOne", addOne
      "multiplyByTwo", multiplyByTwo
      "square", square ]
    |> Map.ofList

let toFunction name : Context -> Result<Context> =
    match Map.tryFind name functionMap with
    | Some func -> func
    | None -> fun _ -> Failure (sprintf "Function %s not found" name)

let pipeline schema context functions =
    match validateSchema schema context with
    | Failure msg -> Failure msg
    | Success validatedContext ->
        functions
        |> Array.fold (fun acc funcName ->
            match acc with
            | Failure msg -> Failure msg
            | Success ctx -> toFunction funcName ctx) (Success validatedContext)

5. Implementing and Testing the Pipeline

Finally, we implement and test our pipeline:

let schemaJson = SchemaObject (Map.ofList [ ("value", SchemaRequired SchemaNumber) ])
let initialContext = createContextWithNewValue 3
let functionNames = [| "addOne"; "multiplyByTwo"; "square" |]
let resultContext = pipeline schemaJson initialContext functionNames

match resultContext with
| Success ctx -> printfn "Result: %s" (ctx.Input.ToString())
| Failure msg -> printfn "Error: %s" msg

Integrating with Semantic Kernel

To make our AI app more realistic, we integrate it with the Semantic Kernel by creating a plugin and utilizing OpenAI models:

type Calculate() =
    [<KernelFunction>]
    [<Description("")>]    
    member this.Pipeline([<Description("input number")>] input:int , [<Description("choose from addOne multiplyByTwo square")>] functionNames:string[] ) = 
        let schemaJson = SchemaObject (Map.ofList [ ("value", SchemaRequired SchemaNumber) ])
        let initialContext = createContextWithNewValue input
        let resultContext = pipeline schemaJson initialContext functionNames
        match resultContext with
        | Success ctx -> sprintf "Result: %s" (ctx.Input.ToString())
        | Failure msg -> sprintf "Error: %s" msg

let key = "sk-"  
let model = "gpt-4o-mini" 
let chat_url ="https://api.openai.com/v1/chat/completions" 
let builder = Kernel.CreateBuilder().AddOpenAIChatCompletion(modelId = model, endpoint = Uri(chat_url), apiKey = key)
let plugins = builder.Plugins.AddFromType<Calculate>()
let kernel = builder.Build()

asyncEx {
    let settings = OpenAIPromptExecutionSettings()
    settings.ToolCallBehavior <- ToolCallBehavior.AutoInvokeKernelFunctions
    let arguments = new KernelArguments(settings)
    printfn "Plugins count : %d" kernel.Plugins.Count
    let! response2 = kernel.InvokePromptAsync("Calculate: input 3 to Pipeline [addOne addOne]", arguments) 
    Console.WriteLine(response2)
} |> Async.RunSynchronously |> ignore

Conclusion

By leveraging the power of F# and the versatility of Semantic Kernel, we can create AI applications following the pipeline pattern efficiently. This combination not only simplifies our development process but also ensures our applications are maintainable, scalable, and robust. Whether you're new to F# or Semantic Kernel, diving into this pattern can significantly enhance your ability to build sophisticated AI solutions with minimal complexity. Happy coding!

Building a Semantic Kernel with F# for Enhanced AI Interaction

Rocky LIU Yan — Wed, 28 Aug 2024 08:03:55 +0000

This blog base from https://github.com/microsoft/semantic-kernel/blob/main/dotnet/samples/GettingStarted/Step2_Add_Plugins.cs

F# code is here https://github.com/rocklau/fsharpPlayground

In the age of artificial intelligence, leveraging powerful tools to interact seamlessly with users is crucial. Semantic Kernels serve as versatile frameworks that enable AI models to comprehend and respond to queries intelligently. In this blog post, we’ll explore how to create a Semantic Kernel using F#, integrating plugins to enhance functionality and improve user interaction.

Setting Up the Semantic Kernel

The foundation of our Semantic Kernel is built on several key components:

Time Information Plugin: This plugin retrieves the current time in UTC.
Widget Factory Plugin: This plugin allows users to create widgets with specified types and colors.

Let's take a look at the code implementation for these plugins.

Time Information Plugin

This simple plugin is designed to provide the current UTC time, making it accessible for any application requiring time-related information.

type TimeInformationPlugin() =
    [<KernelFunction>]
    [<Description("Retrieves the current time in UTC.")>]
    member this.GetCurrentUtcTime() = DateTime.UtcNow.ToString("R")

Widget Factory Plugin

The widget factory plugin is more complex, allowing users to generate custom widgets based on their preferences. The plugin utilizes enumerated types to specify widget characteristics.

type WidgetType =
    | [<Description("A widget that is useful.")>] Useful = 0 
    | [<Description("A widget that is decorative.")>] Decorative = 1 

type WidgetColor =
    | [<Description("Use when creating a red item.")>] Red = 0 
    | [<Description("Use when creating a green item.")>] Green = 1
    | [<Description("Use when creating a blue item.")>] Blue = 2

type WidgetDetails =
    {
        SerialNumber: string
        Type: WidgetType
        Colors: WidgetColor[]
    }

type WidgetFactoryPlugin() =
    [<KernelFunction>]
    [<Description("Creates a new widget of the specified type and colors")>]    
    member this.CreateWidget(widgetType: WidgetType, widgetColors: WidgetColor[]) = 
        let number = $"{widgetType}-{String.Join('-',widgetColors)}-{Guid.NewGuid()}"
        Console.WriteLine $"Call a widget {number}"
        {
            SerialNumber = number
            Type = widgetType
            Colors = widgetColors
        }

Configuring the Kernel

After implementing the plugins, we construct the kernel and register our plugins. This is achieved by configuring the OpenAI API for chat functionalities.

let builder = Kernel.CreateBuilder()
                .AddOpenAIChatCompletion(modelId = "gpt-4o-mini", endpoint = Uri("https://api.chatgpt.com/v1/chat/completions"), apiKey = "sk-")
                .Plugins.AddFromType<TimeInformationPlugin>()
                .AddFromType<WidgetFactoryPlugin>()

let kernel = builder.Build()

Example Use Cases

Once the kernel and plugins are set up, we can create various examples to demonstrate their capabilities. Below are a few examples.

Example 1: Basic Interaction

In this example, we query the kernel about the color of the sky.

let example1 =
    fun () ->
        task {
            printfn "example1"
            let! response = kernel.InvokePromptAsync("What color is the sky?")
            Console.WriteLine response
        }

Example 2: Streaming Responses

We can also create streaming interactions, which allow us to get real-time responses from the AI.

let example2 =
    fun () ->
        asyncEx {
            printfn "example2"
            let arguments = new KernelArguments()
            arguments.Add("topic", "forest")
            let stream = kernel.InvokePromptStreamingAsync("What color is {{$topic}}?", arguments)

            for item in stream do
                Console.Write item
        }

Example 3: Using Plugins

We can directly utilize our plugins within prompts. For instance, we can retrieve the current UTC time and ask how many days remain until Christmas.

let example4 = fun() ->
    asyncEx {
        let! response = kernel.InvokePromptAsync("The current time is {{TimeInformationPlugin.GetCurrentUtcTime}}. How many days until Christmas?")
        Console.WriteLine response
    }

Example 5: Creating Widgets

Finally, we can automatically invoke functions to create customizable widgets.

let example5 = fun() ->
    asyncEx {
        let settings = OpenAIPromptExecutionSettings()
        settings.ToolCallBehavior <- ToolCallBehavior.AutoInvokeKernelFunctions
        let arguments = new KernelArguments(settings)

        let! response2 = kernel.InvokePromptAsync("Create a beautiful scarlet colored widget for me.", arguments) 
        Console.WriteLine(response2)
    }

Conclusion

In this blog, we've explored how to build a Semantic Kernel using F#. By combining plugins with real-time AI interaction, we can create dynamic applications that respond intuitively to user queries. This framework not only enhances user experiences but also opens doors to countless possibilities for future developments in AI interactions.

Feel free to expand upon this framework, experiment with additional plugins, and integrate it into your own applications to fully realize the capabilities of semantic technology and AI!

Smooth Streaming Control with System.Threading.Channels in GPT API Programming

Rocky LIU Yan — Mon, 12 Aug 2024 09:54:00 +0000

In today’s digital world, real-time interactions are becoming increasingly essential, especially in applications that leverage powerful AI models like OpenAI’s GPT-4. One of the significant advancements in .NET that ensures smooth and efficient handling of streaming data is the System.Threading.Channels library. This blog explores how to harness this feature to improve streaming control when interacting.

What is System.Threading.Channels?

System.Threading.Channels is a modern concurrency primitive provided in .NET for handling asynchronous messaging between producer and consumer tasks. It allows developers to implement robust and scalable applications that require real-time updates without blocking the main execution flow.

Why Use Channels for Streaming?

Asynchronous Message HandlingUtilizing channels helps decouple the production of messages from their consumption. In an interactive chat scenario, the producer (responsible for generating responses) can run independently of the consumer (which handles display logic). This means users can continue to interact with the application while responses are being processed in the background.
Efficient Backpressure ManagementA critical feature of channels is their ability to manage backpressure effectively. In scenarios where the producer is generating messages faster than the consumer can process them, channels prevent overloading. This is crucial for maintaining application responsiveness and ensures that the system remains stable under varying loads.
Flow ControlDevelopers can set constraints for the channel to regulate the maximum number of messages being queued. This enables precise control over resource allocation, preventing excessive memory consumption and ensuring that the application runs smoothly even during peak activity periods.

How It Works: A Breakdown of the Code

Let’s look at how to implement it.

Producer Task

The producer task fetches updates from the GPT model and sends them to the channel. Here’s a snippet demonstrating this:

var producer = Task.Run(async () =>
{
    int messageCount = 0;
    await foreach (var update in kernel.InvokePromptStreamingAsync(query))
    {
        if (messageCount == 0) stopwatch.Start();
        messageCount++;
        sourceText.Append(update);
        layout["Output"].Update(
            new Panel(
                Align.Left(new Markup(Markup.Escape(sourceText.ToString())))
            ).Expand()
        );
        ctx.Refresh();
        await channel.Writer.WriteAsync(update.ToString());
    }
    channel.Writer.Complete();
    stopwatch.Stop();
});

In this code, the producer retrieves responses asynchronously and updates the display in real-time as messages are received, maintaining an engaging user experience.

Consumer Task

The consumer task reads messages from the channel and processes them:

var consumer = Task.Run(async () =>
{
    int totalLength = 0;
    await foreach (var message in channel.Reader.ReadAllAsync())
    {
        totalLength += message.Length;
        // Further processing of the message...
    }
});

By separating the logic for handling incoming messages, developers can keep the user interface responsive, allowing for fluid interactions without lag.

Performance Monitoring

Monitoring performance is essential in any real-time application. You can track key metrics like request duration and latency to optimize your workflow. For example:

layout["status"].Update(
    new Panel(
        Align.Center(new Markup($"Request Time: {stopwatch.Elapsed}"),
            VerticalAlignment.Middle)
        ).Expand()
);

This feedback loop enhances the development and user experience by providing insights into application performance.

Components

OpenAI Chat Completion(Microsoft.SemanticKernel): The application integrates with OpenAI’s API to leverage the GPT-4 model for generating responses based on user input.
Spectre.Console: Used to create a visually appealing console interface, allowing for dynamic updates and rendering of text.

Conclusion

Using System.Threading.Channels for enhanced streaming control significantly improves performance, user experience, and stability. By implementing this powerful feature, developers can create real-time, interactive applications that seamlessly handle the demands of modern users.

If you’re building an application that requires real-time updates or interactions with AI models, consider adopting System.Threading.Channels for a smoother, more efficient experience. Happy coding!

Full code :

// See https://aka.ms/new-console-template for more information
using Microsoft.SemanticKernel;
using Spectre.Console;
using System;
using System.Text;
using System.Threading.Channels;
using System.Threading.Tasks;


using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

using System.Threading.Tasks;
using System.Diagnostics;

// Create a kernel with OpenAI chat completion
var key = "sk-";
var model = "gpt-4o-mini";
var chat_url = "https://api.chatgpt.com/v1/chat/completions";

#pragma warning disable SKEXP0010 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
var kernel = Kernel
                   .CreateBuilder()
                   .AddOpenAIChatCompletion(modelId: model, endpoint: new Uri(chat_url), apiKey: key).Build();
#pragma warning restore SKEXP0010 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
//kernel.PromptRenderFilters.Add(new PromptRenderLoggingFilter());

// Create the layout
var layout = new Layout("Root")
    .SplitColumns(
        new Layout("Left"),
        new Layout("R").SplitRows(new Layout("Right"), new Layout("status"))
        );
layout["Right"].Ratio(11);
layout["Left"].Update(
new Panel(
    Align.Center(
        new Markup(""),
        VerticalAlignment.Middle))
    .Expand());

layout["Right"].Update(
new Panel(
    Align.Center(
        new Markup(""),
        VerticalAlignment.Middle))
    .Expand());
layout["status"].Update(
new Panel(
Align.Center(
    new Markup(""),
    VerticalAlignment.Middle))
.Expand());
Stopwatch gapWatch = new();
Stopwatch origanWatch = new();
AnsiConsole.Write(layout);
while (true)
{


    var q = AnsiConsole.Ask<string>("Let's talk, What do you want?:rocket: ");



    var channel = Channel.CreateUnbounded<string>();
    StringBuilder sourceText = new();
    StringBuilder targetText = new();




    await AnsiConsole.Live(layout)
         .StartAsync(async ctx =>
         {
             layout["Left"].Update(
                                     new Panel(
                                         Align.Center(
                                             new Markup("Loading:fire:"),
                                             VerticalAlignment.Middle))
                                         .Expand());
             ctx.Refresh();


             // AnsiConsole.Write(layout);

             var producer = Task.Run(async () =>
                     {
                         var i = 0;
                         await foreach (var update in kernel.InvokePromptStreamingAsync(q))
                         {
                             if (i == 0) origanWatch.Start();
                             i++;
                             sourceText.Append(update);
                             // Update the left column
                             layout["Left"].Update(
                                     new Panel(
                                         Align.Left(
                                             new Markup(Markup.Escape(sourceText.ToString())),
                                             VerticalAlignment.Middle))
                                         .Expand());
                             ctx.Refresh();


                             await channel.Writer.WriteAsync(update.ToString());
                         }
                         channel.Writer.Complete();
                         origanWatch.Stop();
                         gapWatch.Start();
                     });



             var consumer = Task.Run(async () =>
             {
                 //0.0014 rate/per 1k
                 int count = 0;
                 int baseDelay = 100;//400
                 int minDelay = 0;
                 int maxDelay = 20;//30
                 await foreach (var text in channel.Reader.ReadAllAsync())
                 {



                     count += text.Length;


                     var radio = (sourceText.Length - count) > 100 ? (sourceText.Length - count) / 30 : 1;

                     var smooth_delay = sourceText.Length == 0 ? minDelay : (baseDelay - (count * baseDelay / sourceText.Length)) / radio;


                     int delay = Math.Min(maxDelay, Math.Max(minDelay, smooth_delay));

                     layout["status"].Update(
                         new Panel(
                             Align.Center(
                                 new Markup($"delay:[red]{delay}[/] text length:[red]{sourceText.Length}[/] left:{sourceText.Length - count} speed: {smooth_delay} radio:{radio}  word_len: {text.Length} "),

                                 VerticalAlignment.Middle))
                             .Expand());



                     await Task.Delay(delay);  
                     targetText.Append(text);  
                                              //  if (!response.HttpContext.RequestAborted.IsCancellationRequested) 
                                              //  {
                                              //       
                                              //      await response.WriteAsync($"data: {text[i]}\n\n");
                                              //      await response.Body.FlushAsync();  
                                              //  }

                     layout["Right"].Update(
                         new Panel(
                             Align.Left(
                                 new Markup(Markup.Escape(targetText.ToString())),
                                 VerticalAlignment.Middle))
                             .Expand());
                     ctx.Refresh();



                 }

             });
             await Task.WhenAll(producer, consumer);

             gapWatch.Stop();
             Console.WriteLine(gapWatch.Elapsed);
             layout["status"].Update(
                      new Panel(
                          Align.Center(
                              new Markup($"origan:{origanWatch.Elapsed}gap: {gapWatch.Elapsed} "),

                              VerticalAlignment.Middle))
                          .Expand());

         });



}



Console.WriteLine("All text has been processed.");

This code implements a dynamic text display system with variable delay, similar to a typewriter effect. Here's the summary:

It processes text chunk by chunk with a dynamic delay between each chunk
Key variables:
- baseDelay: Starting delay (100ms)
- minDelay: Minimum delay (0ms)
- maxDelay: Maximum delay (20ms)
The delay calculation:
- Gets shorter as more text is displayed (count increases)
- Uses a ratio (radio) to accelerate for longer remaining text
- smooth_delay = (baseDelay - (progress * baseDelay / total)) / ratio
Speed adjustments:
- Speeds up when more than 100 characters remain
- Maintains minimum and maximum delay boundaries
- Updates progress info in UI panel

In simple terms: it starts slow and gradually speeds up as it approaches the end, ensuring smooth text display with adaptive pacing.

Aspire Three Ways to Implement Service Discovery for Non-.NET APIs micro-services

Rocky LIU Yan — Wed, 24 Jul 2024 06:58:31 +0000

Method	Resource type	Description
AddProject	ProjectResource	A .NET project, for example ASP.NET Core web apps.
AddContainer	ContainerResource	A container image, such as a Docker image.
AddExecutable	ExecutableResource	An executable file.

Aspire provides three resource types: Project, Container, and Executable. However, service discovery is only enabled by default for Project resources.

To build web API microservices in languages other than .NET, we can utilize the IResourceWithServiceDiscovery interface.

Here, we demonstrate Aspire's non-.NET Web API service discovery approach using a Bun web API (similar to Node.js). Three code examples illustrate different methods.

Project File Location: .. /runner

1. Container Resource with Service Discovery

We'll inherit from both the container resource and the service discovery interface:

public class BunContainerResource(string name) : ContainerResource(name), IResourceWithServiceDiscovery
{

}

In AppHost, we add the container resource with details:

var bun = builder.AddResource(new BunContainerResource("runner"))
                .WithImage("oven/bun", "distroless")
                .WithBindMount(".. /runner", "/home/bun/app/")
                .WithEndpoint(targetPort: 3000, scheme: "http", env: "PORT")
                .WithArgs("--hot", "/home/bun/app/src/index.ts");

// Also, Replace WithImage to WithDockerfile 
.WithDockerfile("../runner")

To interact with the Bun service, register RunnerApiClient with a base URL dynamically constructed using service discovery:

builder.Services.AddHttpClient<RunnerApiClient>(client => client.BaseAddress = new Uri($"http://runner"));

2. Executable Resource with Service Discovery

Define a class for discoverable executable resources:

public class BunExecuteableResource(string name, string executablePath, string projectDirectory) : ExecutableResource(name, executablePath, projectDirectory), IResourceWithServiceDiscovery
{

}

In AppHost, register the executable resource:

var bunProject = new BunExecuteableResource("runner", "bun", ".. /runner");
var bun = builder.AddResource(bunProject)
                .WithArgs("run", "dev")
                .WithEndpoint(targetPort: 3000, scheme: "http", env: "PORT");

3. Yarp Proxy Integration with .NET Web API

If you have an existing .NET Web API project, it might already have a built-in Yarp proxy for service exposure. Here's how to configure Yarp:

Yarp Configuration (JSON):

"destination1": {
    "Address": "http://localhost:3000/"
}

Alternatively, you can start the Bun service directly within AppHost:

var bun = builder.AddExecutable("runner", "bun", ".. /runner");

Then, reference the service's endpoint:

.WithReference(bun.GetEndpoint("runner"))

Easily Develop a GPTs Chat App with Hono, Bun, and HTMX

Rocky LIU Yan — Wed, 29 May 2024 10:34:42 +0000

htmx -> http --> hono --> gpt

code here: https://github.com/rocklau/gpts-chat-app

This is a chat application that allows users to interact with multi AIs through a simple and intuitive interface. There is also a human channel chat feature that needs a bug fix. You might consider switching to Tailwind CSS for styling. This repository is intended for learning purposes only.

Thanks for open source with htmx hono bun mitata openai cherry-markdown

Directory Structure
The project directory is organized as follows:

static/:
index.html: Main HTML file for the application. have htmx and js logic.
src/:
index.tsx: Entry point of the application, core server logic.
GptChat.tsx: Component for the GPT chat interface.
models.tsx: Configuration for the AI models.
benmarking.tsx: Benchmarking scripts for performance testing gpt models.
HumanChat.tsx: Component for human-to-human chat interface. have bug

Best Three Open Source JSON RPC Projects(Kiota, Hono, tRPC) -- easier to dev client json code

Rocky LIU Yan — Thu, 23 May 2024 06:54:57 +0000

Recommend Project: Kiota, Hono, tRPC

There are two good benefits:

Avoid manual alignment of JSON interfaces

The rise of edge services blurs the lines between client/server. First and foremost is Next.js’s introduction of server actions this year.

Other JavaScript frameworks also have similar capabilities:
hono.dev,
trpc.io
They all enable front-end and back-end to call a unified set of functions, known as RPC (Remote Procedure Call). For example, client.posts.get()

Microsoft also has an open-source project named Kiota, which generates cross-language client RPC code based on OpenAPI schemas.

These libraries have similar usage patterns but different focuses.

microsoft/kiota:

Below are the client languages that Kiota can generate based on OpenAPI.
Supported languages CSharp Go Java PHP Python Ruby Swift TypeScript JavaScript