Evolution of GenAI

 

A Tetralogy of AI Evolution:

• Just Chatbot: Pretrained neural network. No tools;
• Agent: DNN + Tools
• Loop Engineering, Graph Engineering ...
• DAN: Deep Agent Network based on Deep Neural Network 😂

I Tried Firebase "Prototype with AI" - First Impressions

Google launched Firebase Studio this April.  I tried its "Prototype with AI" feature and recorded my experience here.

TL;DR; It is great for creating an interactive mock UI. It is NOT designed to bring you the full stack web application that is production ready. 

I spent an hour learning and playing with it. Everything is super intuitive. I did not need to look for help anywhere else. During this hour, I wrote prompts (essentially requirement specs and provided a few feedback after I was able to try the user experience), waited for code generation, reported bugs and waited for AI to fix the bugs. By the end of the hour, it created an interactive web app that is good for a concept demo.

A few things I found interesting:

• There is a feature to "Select" UI element and write prompt. This is very helpful. Made the iteration process feel like a proper UX design session
• Bug fix takes just a click of the "Fix Error" button. AI made some mistakes, but had 100% success rate to fix bugs without requiring manual code changes
• It is capable to generate a decent interactive column chart 

Initial Prompt 

 Create a web application for order picking. Requirements below: 

 

• Top left is logo placeholder, top right is a user avatar
• Color theme: main color is Teal and can use contract or complimenting color in the theme
• Site name: Order Picking
• Filters:
• Stores: examples "Downtown", "West Side"
• Assignment: "Assigned to me", "Unassigned"
• Order list in a grid
• Grid has columns: Order ID, Store Name, Priority, Assignment, and Created Time 
• Grid is sortable, default sort by Priority then Created Time
• If user click any order, will show order details
• Order details contain the following information:
• Order header information
• Grid for order lines with columns: and recommended pick order (starting from 1), item name, description, picture, quantity, location (example: Aisle 1, Bay 4),
• A link to navigate back to order list 
• Two action buttons on order details page:
•  One button to confirmed order is picked, and will ask user to enter the order container ID
• Another button to confirm the order is unpickable, and will ask user to provide reason through dropdown with values: "No item at location", "Not enough item at location", "Wrong item at location", "Other". If user select Other, will have a free text box to optionally provide details 

 

Iterations

After the initial prompt, I am able to play with the app, and suggest some changes then try again. Two of the prompts Italic below, I was able to use the "Select' feature to to pinpoint the web component that I am providing feedback on. 

• Add 2000 sample orders and a few order lines for each sample order. Add pagination to the order list, with page size preferences: 10, 25, 50.
• If order is assigned to somebody else, this order will be in read-only mode. And the "Assigned To" area should show an icon to alert user to not pick this order (for element <OrderDetailHeader>)
• Add "Assign to me" button if order is not assigned to anyone yet. Once order assigned to the user, then the action buttons will be available. (for element <CardContent>)
• When user click Avatar, show a menu. For now, just one option to show user's pick statistics. When user navigate to that page, show user's past 30 day pick statistics in a chart. 

Screenshots 

Generated UI - Interactive Chart

Generated UI - Dialog

Generated UI - Data Grid

Generated UI - Grid with filter and pagination

Design Experience - One Click Bug Fix

Design Experience - "Select" element and write prompt

 

Enterprise Integration Recipe: File Transfer Using Google Cloud Storage

This is one of a series of recipes on how to use products offered by Google Cloud Platform to implement enterprise integration solutions.

GCP Product used in this article:

• Google Cloud Storage,  
• Google Cloud Pub/Sub, 
• Google Cloud Functions

Implementation

System Diagram

Flow Chart for Subscriber

Recipe:

• gcs.tf: TerraForm code that provision and configure all GCP resource needed
• README.md: up to date instruction on how to use the recipe

Noteworthy Tips:

• GCS Object Lifecycle: make it easy to configure archive and error box. We should move old files to cold or nearline storage and eventually purge them. No more custom CRON jobs for this chore;
• Pubsub Notification for GCS: we configured notification for inbox "OBJECT_FINALIZE" event. Again no more CRON jobs needed to scan folders for new files. Another advantage is that the subscriber do not need to worry if we might be dealing with partially uploaded file;
• Stackdriver Monitoring or GCS: not configured in the recipe. But definitely worth exploring. For example, "object_count" might be used to monitor error box, and send alert when we see the count increasing too fast;
• Retry: this recipe implemented retry by simply do not "ACK" CPS messages. Cloud Pubsub will send notification again after ACK deadline expired for 7 days. So retry is implemented by CPS subscription's At-Least-Once Delivery feature. If want a shorter total retry period, you can add a line of code to check age of a message and mark it non-retriable if message age is over threshold. This approach saves the trouble of implementing reliably retry mechanism. Downside is lost control of retry intervals (for example, there is no exponential backoff retry)

"Permission denied to generate login hint for target domain."

Google OAuth Error Message: Permission denied to generate login hint for target domain.

Root Cause: development server, was using http://127.0.0.1:8080, even if I added it to cloud config, does not work. But once I change to http://localhost:8080, it starts to work.

Summer Fun with Google BigQuery

Nothing beats a game that can keep the whole family entertained for a few hours, while teaching kids some programming sense.

Just two weeks into summer, I already ran out of ideas to keep kids entertained.

Today, Google BigQuery come to the rescue. To be more precise, the USA Name Data provided hours of entertainment.

"This public dataset was created by the Social Security Administration and contains all names from Social Security card applications for births that occurred in the United States after 1879."

After showing my kids a few very simple queries of the USA Name Data, we started to play "Family Feud" game:

Most Popular Names

• Everyone write down 5 names in secret
• After we are done, each need to write their own query and run it in BQ to find out total count of these five names in all years
• Whoever gets the most counts wins
• Cannot reuse names in the following rounds

(After three rounds, we covered almost all the top 20 names in USA.)

Then we played another game with the dataset with these rules

Least Popular Names

• Write down 5 names in secret
• The names must draw at least one count
• Whoever gets the least counts wins

(We actually got one name with only 5 in all the last 103 years!)

Here is a sample query

SELECT SUM(number), name 
FROM [bigquery-public-data:usa_names.usa_1910_2013] 
WHERE name in ('John', 'Jason', 'Mary', 'David', 'William')
GROUP BY name

Now, after we are done with the game, the following two queries will show us the top answers.

Least Popular Names

SELECT SUM(number), name 
FROM [bigquery-public-data:usa_names.usa_1910_2013] 
GROUP BY name
ORDER BY 1

Most Popular Names

SELECT SUM(number), name 
FROM [bigquery-public-data:usa_names.usa_1910_2013] 
GROUP BY name
ORDER BY 1 DESC

Some Follow Up Questions

While the kids are still keen on it, some follow up questions will keep their brains from getting rusty:

• How many kids were born in the same year, and with the same name as yours?
• Which year has the most kids with the same name as yours?
• Are there any kids with your name in the opposite gender?
• Which years are "baby boom" years? (Hint: save to Google Sheet, and plot year vs. count(number))
• Which years have the most "Jacqueline"s and why? (Hint: opportunity for some history lessons about first ladies)
• Most gender neutral names (Hint: refer to this page)

Angular 2: Building a Google Map Component

Live Demo
Github Repo
 
In order to force myself dig deeper into Angular 2, I tried to build a component wrapper for Google Map JavaScript API. The end results is a demo component here: google_map.component.ts.

 

Sample Client Code

A sample client code using the component looks like this:

Features

The features including:

• Drawing through Angular binding
• Map events published as Angular events 

 

Tips

Here are some code snippets the highlights some of the lessons I have learned.

First, make sure Google Maps library is loaded from here:

    https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=visualization,place&callback=initMap

Add this line in typings.ts, so that we can have type definitions for Google Maps JavaScript API

    "googlemaps": "github:DefinitelyTyped/DefinitelyTyped/googlemaps/google.maps.d.ts"

Event handlers turns out to be tricky. My naive first implementation was something like this

this.map.addListener('click', function(e: google.maps.MouseEvent) {      
  this.mapClick.emit(e.latLng));
);

Turns out there are two big problems in this implementation:

1. this inside the event handler does not have member mapClick. Because it is no longer the component class
2. Once scope of this is fixed, I found data changes in the event handler does not trigger Angular change detection

Solutions for those problems? See the comments in my final implementation:

On the CSS side, it is very important to set height of Google Map component. If not done, it is automatically collapsed to nothing, and you won't see a map.

Demo 

Finally, a functional demo is here: google_map.html. Below is screenshot of the demo in action:

Angular 2: Injecting Parent and Child Component

Live Demo
Github Repo

To inject children component into a parent component, use ViewChildren (notice there is also ConentChildren which will inject children from content projection).

To inject a parent into child component, you simply need to inject parent in the constructor of child component. However, there is a bit of problem due to circular reference. The parent component has to reference child component as directive. If the child also depends on parent, we will get an error like this: EXCEPTION; Cannot resolve all parameters for '[ParentComponent]'.... So, the following slightly twisted injection is needed:

        contructor(@Inject(forwardRef(() => ParentComponent)) private _parent: ParentComponent)

A small working example showing both child and parent component injection can be downloaded here: https://github.com/huguogang/ng2tsdemo/blob/master/view_child.html.

Angular 2 Content, Content Projection, Transclusion

Live Demo
Github Repo

I guess under all these fancy words (especially Transclusion), there is a simple concept. And it seems to me, it is way easier to learn it by starting with looking at a working sample, make some changes and observe the changes.

I have created a bare minimum working example here: https://github.com/huguogang/ng2tsdemo/blob/master/content.html

Here are the key code fragments. Related elements are color coded.
Template for the directive:

<div>
  <h1><ng-content select="my-title"></ng-content></h1>
  <div>
    <ng-content select="content"></ng-content>
  </div>
  <br/>
  <em style="font-size:smaller"><ng-content select="footer"></ng-content></em>
</div>

Markup in the client component:

<multi-slot-content>
  <my-title>Angular 2 Content Demo</my-title>
  <content>The selectors defined in MultiSlotContent directive will find 
    the content element in this template, insert it into it's own template 
    section.</content>
  <footer>Footer: this feature was called transclusion in Angular 1.</footer>
</multi-slot-content>

Resulting HTML Markup:

<multi-slot-content>
  <div>
    <h1><my-title>Angular 2 Content Demo</my-title></h1>
    <div>
      <content>The selectors defined in MultiSlotContent directive will find 
        the content element in this template, insert it into it's own template 
        section.</content>
    </div>
    <br>
    <em style="font-size:smaller"><footer>Footer: this feature was called transclusion in Angular 1.</footer></em>
  </div>
</multi-slot-content>

Notice the key is to define proper Angular 2 selectors in the directive. Then in the client component, it just need to fill the content in the right selector target. The end result is the directive's ng-content elements got replaced by the fragments from client.