From 39dd565d5b4ccf093ad4c903e269821dc396a739 Mon Sep 17 00:00:00 2001
From: Sumanth Chinthagunta <xmlking@gmail.com>
Date: Mon, 11 Nov 2024 20:08:59 -0800
Subject: [PATCH] fix(smart): add crome origin trails for Summarization API

---
 apps/smart/src/app.html                       |  11 +-
 .../routes/examples/data-table/+page.svelte   |   2 +-
 .../data-table/data-table-actions.svelte      |   8 +-
 .../data-table/data-table-checkbox.svelte     |  10 +-
 .../data-table/data-table-email-button.svelte |   8 +-
 .../examples/data-table/data-table.svelte     | 418 +++++++++---------
 docs/ai-swarm.md                              |   1 +
 packages/smart/README.md                      |  62 +--
 8 files changed, 262 insertions(+), 258 deletions(-)
diff --git a/apps/smart/src/app.html b/apps/smart/src/app.html
index e9c257a7..0a81203c 100644
--- a/apps/smart/src/app.html
+++ b/apps/smart/src/app.html
@@ -2,8 +2,17 @@
 <html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <!-- google origin-trial for Language Detector API. TODO: remove it later -->
+     <!--Language Detector API for console.traefik.me:5173 -->
+    <meta http-equiv="origin-trial" content="AiVFWMnV7QYA5pqGdezep1T1h22k0ufTHeg/nqn5nIwj9Hx7bgZC/R/9BwkcykLwK2Vc1pKgQSbD/9yn/XY4yA8AAAB0eyJvcmlnaW4iOiJodHRwczovL2NvbnNvbGUudHJhZWZpay5tZTo1MTczIiwiZmVhdHVyZSI6Ikxhbmd1YWdlRGV0ZWN0aW9uQVBJIiwiZXhwaXJ5IjoxNzQ5NTk5OTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
+    <!--Language Detector API for spectacular-console.vercel.app -->
+    <meta http-equiv="origin-trial" content="AlUflGB5JNI846dE4S6Us0sb7u/i8wXLaN4NL/zpq9O1qIxEhg1C0C7gV56wRmGpWtbDq48RWwoY93RyojNrWA4AAAB/eyJvcmlnaW4iOiJodHRwczovL3NwZWN0YWN1bGFyLWNvbnNvbGUudmVyY2VsLmFwcDo0NDMiLCJmZWF0dXJlIjoiTGFuZ3VhZ2VEZXRlY3Rpb25BUEkiLCJleHBpcnkiOjE3NDk1OTk5OTksImlzU3ViZG9tYWluIjp0cnVlfQ==">
+   <!-- Summarization API for console.traefik.me:5173 -->
+    <meta http-equiv="origin-trial" content="AhRX/1kbfhyJeDOwiIL2iOxVM0G0eSlfsJMnTUxmhxcbnkfJY2GjmJnMADNGCG4EKvy+l8cUFpCWt2Cx0ty7MgQAAAByeyJvcmlnaW4iOiJodHRwczovL2NvbnNvbGUudHJhZWZpay5tZTo1MTczIiwiZmVhdHVyZSI6IkFJU3VtbWFyaXphdGlvbkFQSSIsImV4cGlyeSI6MTc1MzE0MjQwMCwiaXNTdWJkb21haW4iOnRydWV9">
+    <!-- Summarization API for spectacular-console.vercel.app -->
+    <meta http-equiv="origin-trial" content="Arw+7FaZF8eDO8gO0KRWUp6fXWPCF3K72a0XoNET055K1UNG3xyPflq44VTz3glRAAsq8ZpPsoySHiM/I3RwMAsAAAB9eyJvcmlnaW4iOiJodHRwczovL3NwZWN0YWN1bGFyLWNvbnNvbGUudmVyY2VsLmFwcDo0NDMiLCJmZWF0dXJlIjoiQUlTdW1tYXJpemF0aW9uQVBJIiwiZXhwaXJ5IjoxNzUzMTQyNDAwLCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/apps/smart/src/routes/examples/data-table/+page.svelte b/apps/smart/src/routes/examples/data-table/+page.svelte
index 327797b1..bb8bf189 100644
--- a/apps/smart/src/routes/examples/data-table/+page.svelte
+++ b/apps/smart/src/routes/examples/data-table/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import DataTable from "./data-table.svelte";
+import DataTable from './data-table.svelte';
 </script>
 
 <div class="container mx-auto py-10">
diff --git a/apps/smart/src/routes/examples/data-table/data-table-actions.svelte b/apps/smart/src/routes/examples/data-table/data-table-actions.svelte
index 71a3522b..6e1c8042 100644
--- a/apps/smart/src/routes/examples/data-table/data-table-actions.svelte
+++ b/apps/smart/src/routes/examples/data-table/data-table-actions.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import DotsHorizontal from "svelte-radix/DotsHorizontal.svelte";
-	import { Button } from "@spectacular/ui/components/button";
-	import * as DropdownMenu  from '@spectacular/ui/components/dropdown-menu';
+import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte';
+import { Button } from '@spectacular/ui/components/button';
+import * as DropdownMenu from '@spectacular/ui/components/dropdown-menu';
 
-	let { id }: { id: string } = $props();
+let { id }: { id: string } = $props();
 </script>
 
 <DropdownMenu.Root>
diff --git a/apps/smart/src/routes/examples/data-table/data-table-checkbox.svelte b/apps/smart/src/routes/examples/data-table/data-table-checkbox.svelte
index 830ed7ea..08976365 100644
--- a/apps/smart/src/routes/examples/data-table/data-table-checkbox.svelte
+++ b/apps/smart/src/routes/examples/data-table/data-table-checkbox.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import { Checkbox } from "@spectacular/ui/components/checkbox";
+import type { ComponentProps } from 'svelte';
+import { Checkbox } from '@spectacular/ui/components/checkbox';
 
-	let {
-		checked = false,
-		controlledChecked = true,
-		...restProps
-	}: ComponentProps<typeof Checkbox> = $props();
+let { checked = false, controlledChecked = true, ...restProps }: ComponentProps<typeof Checkbox> = $props();
 </script>
 
 <Checkbox {checked} {controlledChecked} {...restProps} />
diff --git a/apps/smart/src/routes/examples/data-table/data-table-email-button.svelte b/apps/smart/src/routes/examples/data-table/data-table-email-button.svelte
index de998c61..fd2d067f 100644
--- a/apps/smart/src/routes/examples/data-table/data-table-email-button.svelte
+++ b/apps/smart/src/routes/examples/data-table/data-table-email-button.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import CaretSort from "svelte-radix/CaretSort.svelte";
-	import { Button } from "@spectacular/ui/components/button";
+import type { ComponentProps } from 'svelte';
+import CaretSort from 'svelte-radix/CaretSort.svelte';
+import { Button } from '@spectacular/ui/components/button';
 
-	let { variant = "ghost", ...restProps }: ComponentProps<typeof Button> = $props();
+let { variant = 'ghost', ...restProps }: ComponentProps<typeof Button> = $props();
 </script>
 
 <Button {variant} {...restProps}>
diff --git a/apps/smart/src/routes/examples/data-table/data-table.svelte b/apps/smart/src/routes/examples/data-table/data-table.svelte
index ad0ffc79..d7f92e1d 100644
--- a/apps/smart/src/routes/examples/data-table/data-table.svelte
+++ b/apps/smart/src/routes/examples/data-table/data-table.svelte
@@ -1,225 +1,215 @@
 <script lang="ts">
-	import ChevronDown from "svelte-radix/ChevronDown.svelte";
-	import {
-		type ColumnDef,
-		type ColumnFiltersState,
-		type PaginationState,
-		type RowSelectionState,
-		type SortingState,
-		type VisibilityState,
-		getCoreRowModel,
-		getFilteredRowModel,
-		getPaginationRowModel,
-		getSortedRowModel,
-	} from "@tanstack/table-core";
-	import { createRawSnippet } from "svelte";
-	import DataTableCheckbox from "./data-table-checkbox.svelte";
-	import DataTableEmailButton from "./data-table-email-button.svelte";
-	import DataTableActions from "./data-table-actions.svelte";
-	import * as Table from "@spectacular/ui/components/table";
-	import { Button } from "@spectacular/ui/components/button";
-	import * as DropdownMenu from "@spectacular/ui/components/dropdown-menu";
-	import { Input } from "@spectacular/ui/components/input";
-	import {
-		FlexRender,
-		createSvelteTable,
-		renderComponent,
-		renderSnippet,
-	} from "@spectacular/ui/components/data-table";
+import ChevronDown from 'svelte-radix/ChevronDown.svelte';
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  type VisibilityState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+} from '@tanstack/table-core';
+import { createRawSnippet } from 'svelte';
+import DataTableCheckbox from './data-table-checkbox.svelte';
+import DataTableEmailButton from './data-table-email-button.svelte';
+import DataTableActions from './data-table-actions.svelte';
+import * as Table from '@spectacular/ui/components/table';
+import { Button } from '@spectacular/ui/components/button';
+import * as DropdownMenu from '@spectacular/ui/components/dropdown-menu';
+import { Input } from '@spectacular/ui/components/input';
+import { FlexRender, createSvelteTable, renderComponent, renderSnippet } from '@spectacular/ui/components/data-table';
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
+type Payment = {
+  id: string;
+  amount: number;
+  status: 'Pending' | 'Processing' | 'Success' | 'Failed';
+  email: string;
+};
 
-	const data: Payment[] = [
-		{
-			id: "m5gr84i9",
-			amount: 316,
-			status: "Success",
-			email: "ken99@yahoo.com",
-		},
-		{
-			id: "3u1reuv4",
-			amount: 242,
-			status: "Success",
-			email: "Abe45@gmail.com",
-		},
-		{
-			id: "derv1ws0",
-			amount: 837,
-			status: "Processing",
-			email: "Monserrat44@gmail.com",
-		},
-		{
-			id: "5kma53ae",
-			amount: 874,
-			status: "Success",
-			email: "Silas22@gmail.com",
-		},
-		{
-			id: "bhqecj4p",
-			amount: 721,
-			status: "Failed",
-			email: "carmella@hotmail.com",
-		},
-	];
+const data: Payment[] = [
+  {
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'Success',
+    email: 'ken99@yahoo.com',
+  },
+  {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'Success',
+    email: 'Abe45@gmail.com',
+  },
+  {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'Processing',
+    email: 'Monserrat44@gmail.com',
+  },
+  {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'Success',
+    email: 'Silas22@gmail.com',
+  },
+  {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'Failed',
+    email: 'carmella@hotmail.com',
+  },
+];
 
-	const columns: ColumnDef<Payment>[] = [
-		{
-			id: "select",
-			header: ({ table }) =>
-				renderComponent(DataTableCheckbox, {
-					checked:
-						table.getIsAllPageRowsSelected() ||
-						(table.getIsSomePageRowsSelected() && "indeterminate"),
-					onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
-					"aria-label": "Select all",
-				}),
-			cell: ({ row }) =>
-				renderComponent(DataTableCheckbox, {
-					checked: row.getIsSelected(),
-					onCheckedChange: (value) => row.toggleSelected(!!value),
-					"aria-label": "Select row",
-				}),
-			enableSorting: false,
-			enableHiding: false,
-		},
-		{
-			accessorKey: "status",
-			header: "Status",
-			cell: ({ row }) => {
-				const statusSnippet = createRawSnippet<[string]>((getStatus) => {
-					const status = getStatus();
-					return {
-						render: () => `<div class="capitalize">${status}</div>`,
-					};
-				});
-				return renderSnippet(statusSnippet, row.getValue("status"));
-			},
-		},
-		{
-			accessorKey: "email",
-			header: ({ column }) =>
-				renderComponent(DataTableEmailButton, {
-					onclick: () => column.toggleSorting(column.getIsSorted() === "asc"),
-				}),
-			cell: ({ row }) => {
-				const emailSnippet = createRawSnippet<[string]>((getEmail) => {
-					const email = getEmail();
-					return {
-						render: () => `<div class="lowercase">${email}</div>`,
-					};
-				});
+const columns: ColumnDef<Payment>[] = [
+  {
+    id: 'select',
+    header: ({ table }) =>
+      renderComponent(DataTableCheckbox, {
+        checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+        onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+        'aria-label': 'Select all',
+      }),
+    cell: ({ row }) =>
+      renderComponent(DataTableCheckbox, {
+        checked: row.getIsSelected(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        'aria-label': 'Select row',
+      }),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const statusSnippet = createRawSnippet<[string]>((getStatus) => {
+        const status = getStatus();
+        return {
+          render: () => `<div class="capitalize">${status}</div>`,
+        };
+      });
+      return renderSnippet(statusSnippet, row.getValue('status'));
+    },
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) =>
+      renderComponent(DataTableEmailButton, {
+        onclick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+      }),
+    cell: ({ row }) => {
+      const emailSnippet = createRawSnippet<[string]>((getEmail) => {
+        const email = getEmail();
+        return {
+          render: () => `<div class="lowercase">${email}</div>`,
+        };
+      });
 
-				return renderSnippet(emailSnippet, row.getValue("email"));
-			},
-		},
-		{
-			accessorKey: "amount",
-			header: () => {
-				const amountHeaderSnippet = createRawSnippet(() => {
-					return {
-						render: () => `<div class="text-right">Amount</div>`,
-					};
-				});
-				return renderSnippet(amountHeaderSnippet, "");
-			},
-			cell: ({ row }) => {
-				const amountCellSnippet = createRawSnippet<[string]>((getAmount) => {
-					const amount = getAmount();
-					return {
-						render: () => `<div class="text-right font-medium">${amount}</div>`,
-					};
-				});
-				const formatter = new Intl.NumberFormat("en-US", {
-					style: "currency",
-					currency: "USD",
-				});
+      return renderSnippet(emailSnippet, row.getValue('email'));
+    },
+  },
+  {
+    accessorKey: 'amount',
+    header: () => {
+      const amountHeaderSnippet = createRawSnippet(() => {
+        return {
+          render: () => `<div class="text-right">Amount</div>`,
+        };
+      });
+      return renderSnippet(amountHeaderSnippet, '');
+    },
+    cell: ({ row }) => {
+      const amountCellSnippet = createRawSnippet<[string]>((getAmount) => {
+        const amount = getAmount();
+        return {
+          render: () => `<div class="text-right font-medium">${amount}</div>`,
+        };
+      });
+      const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      });
 
-				return renderSnippet(
-					amountCellSnippet,
-					formatter.format(Number.parseFloat(row.getValue("amount")))
-				);
-			},
-		},
-		{
-			id: "actions",
-			enableHiding: false,
-			cell: ({ row }) => renderComponent(DataTableActions, { id: row.original.id }),
-		},
-	];
+      return renderSnippet(amountCellSnippet, formatter.format(Number.parseFloat(row.getValue('amount'))));
+    },
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => renderComponent(DataTableActions, { id: row.original.id }),
+  },
+];
 
-	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
-	let sorting = $state<SortingState>([]);
-	let columnFilters = $state<ColumnFiltersState>([]);
-	let rowSelection = $state<RowSelectionState>({});
-	let columnVisibility = $state<VisibilityState>({});
+let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+let sorting = $state<SortingState>([]);
+let columnFilters = $state<ColumnFiltersState>([]);
+let rowSelection = $state<RowSelectionState>({});
+let columnVisibility = $state<VisibilityState>({});
 
-	const table = createSvelteTable({
-		get data() {
-			return data;
-		},
-		columns,
-		state: {
-			get pagination() {
-				return pagination;
-			},
-			get sorting() {
-				return sorting;
-			},
-			get columnVisibility() {
-				return columnVisibility;
-			},
-			get rowSelection() {
-				return rowSelection;
-			},
-			get columnFilters() {
-				return columnFilters;
-			},
-		},
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onPaginationChange: (updater) => {
-			if (typeof updater === "function") {
-				pagination = updater(pagination);
-			} else {
-				pagination = updater;
-			}
-		},
-		onSortingChange: (updater) => {
-			if (typeof updater === "function") {
-				sorting = updater(sorting);
-			} else {
-				sorting = updater;
-			}
-		},
-		onColumnFiltersChange: (updater) => {
-			if (typeof updater === "function") {
-				columnFilters = updater(columnFilters);
-			} else {
-				columnFilters = updater;
-			}
-		},
-		onColumnVisibilityChange: (updater) => {
-			if (typeof updater === "function") {
-				columnVisibility = updater(columnVisibility);
-			} else {
-				columnVisibility = updater;
-			}
-		},
-		onRowSelectionChange: (updater) => {
-			if (typeof updater === "function") {
-				rowSelection = updater(rowSelection);
-			} else {
-				rowSelection = updater;
-			}
-		},
-	});
+const table = createSvelteTable({
+  get data() {
+    return data;
+  },
+  columns,
+  state: {
+    get pagination() {
+      return pagination;
+    },
+    get sorting() {
+      return sorting;
+    },
+    get columnVisibility() {
+      return columnVisibility;
+    },
+    get rowSelection() {
+      return rowSelection;
+    },
+    get columnFilters() {
+      return columnFilters;
+    },
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  onPaginationChange: (updater) => {
+    if (typeof updater === 'function') {
+      pagination = updater(pagination);
+    } else {
+      pagination = updater;
+    }
+  },
+  onSortingChange: (updater) => {
+    if (typeof updater === 'function') {
+      sorting = updater(sorting);
+    } else {
+      sorting = updater;
+    }
+  },
+  onColumnFiltersChange: (updater) => {
+    if (typeof updater === 'function') {
+      columnFilters = updater(columnFilters);
+    } else {
+      columnFilters = updater;
+    }
+  },
+  onColumnVisibilityChange: (updater) => {
+    if (typeof updater === 'function') {
+      columnVisibility = updater(columnVisibility);
+    } else {
+      columnVisibility = updater;
+    }
+  },
+  onRowSelectionChange: (updater) => {
+    if (typeof updater === 'function') {
+      rowSelection = updater(rowSelection);
+    } else {
+      rowSelection = updater;
+    }
+  },
+});
 </script>
 
 <div class="w-full">
diff --git a/docs/ai-swarm.md b/docs/ai-swarm.md
index 53d23565..6496f90b 100644
--- a/docs/ai-swarm.md
+++ b/docs/ai-swarm.md
@@ -53,6 +53,7 @@ Use [shadcn-chatbot-kit](https://github.com/Blazity/shadcn-chatbot-kit) for UI c
 - <https://x.com/blazity/status/1852380275981893952>
 - <https://shadcn-chatbot-kit.vercel.app/>
 - <https://github.com/Blazity/shadcn-chatbot-kit>
+- [AiBrow](https://aibrow.ai/)
 - Vercel Swarm
   - SDK news <https://x.com/lgrammel/status/1852647732185285106?s=46>
   - API <https://github.com/vercel/ai/tree/main/packages/swarm>
diff --git a/packages/smart/README.md b/packages/smart/README.md
index 0eef14de..70740544 100644
--- a/packages/smart/README.md
+++ b/packages/smart/README.md
@@ -4,19 +4,27 @@ Hybrid AI Apps
 
 AI assistend web components usage examples.
 
+Enabling on-device AI in your Browser. *Private, Fast and Free*
+
 All Components leveraing `Chrome built-in model (Gemini Nano)`, build with [Vercel AI](https://vercel.com/ai) and [chrome-ai](https://github.com/jeasonstudio/chrome-ai) provider
 
-## Magic Spell
+Use [AiBrow](https://aibrow.ai/) to load **Small Language Models (SLMs)** into browser and use then to build *Hybrid AI WebApps*.
+
+* [Docs](https://docs.aibrow.ai/)
+* [API Reference](https://docs.aibrow.ai/api-reference/aibrow)
+* [Playground](https://demo.aibrow.ai/playground/)
+
+## Components
+
+### Magic Spell
 
 This **wordsmith** svelte component enables user write *with confidence* in any web forms.
 
 Based on nextjs [magic-spell](https://github.com/ai-ng/magic-spell/tree/main)
 
-## Smart Date
-
-TODO
+### Smart Date
 
-## Sentiment Analyzer
+### Sentiment Analyzer (TODO)
 
 ## Writing Assistance
 
@@ -30,37 +38,37 @@ Based on discussions with web developers, we've been made aware so far of the fo
 
 #### Summarizer API
 
-- Summarizing a meeting transcript for those joining the meeting late.
-- Summarizing support conversations for input into a database.
-- Giving a sentence- or paragraph-sized summary of many product reviews.
-- Summarizing long posts or articles for the reader, to let the reader judge whether to read the whole article.
-- Generating article titles (a very specific form of summary).
-- Summarizing questions on Q&A sites so that experts can scan through many summaries to find ones they are well-suited to answer.
+* Summarizing a meeting transcript for those joining the meeting late.
+* Summarizing support conversations for input into a database.
+* Giving a sentence- or paragraph-sized summary of many product reviews.
+* Summarizing long posts or articles for the reader, to let the reader judge whether to read the whole article.
+* Generating article titles (a very specific form of summary).
+* Summarizing questions on Q&A sites so that experts can scan through many summaries to find ones they are well-suited to answer.
 
 #### Writer API
 
-- Generating textual explanations of structured data (e.g. poll results over time, bug counts by product, …)
-- Expanding pro/con lists into full reviews.
-- Generating author biographies based on background information (e.g., from a CV or previous-works list).
-- Break through writer's block and make creating blog articles less intimidating by generating a first draft based on stream-of-thought or bullet point inputs.
-- Composing a post about a product for sharing on social media, based on either the user's review or the general product description.
+* Generating textual explanations of structured data (e.g. poll results over time, bug counts by product, …)
+* Expanding pro/con lists into full reviews.
+* Generating author biographies based on background information (e.g., from a CV or previous-works list).
+* Break through writer's block and make creating blog articles less intimidating by generating a first draft based on stream-of-thought or bullet point inputs.
+* Composing a post about a product for sharing on social media, based on either the user's review or the general product description.
 
 #### Rewriter API
 
-- Removing redundancies or less-important information in order to fit into a word limit.
-- Increasing or lowering the formality of a message to suit the intended audience.
-- Suggest rephrasing of reviews or posts to be more constructive, when they're found to be using toxic language.
-- Rephrasing a post or article to use simpler words and concepts ("[explain like I'm 5](https://en.wiktionary.org/wiki/ELI5)").
+* Removing redundancies or less-important information in order to fit into a word limit.
+* Increasing or lowering the formality of a message to suit the intended audience.
+* Suggest rephrasing of reviews or posts to be more constructive, when they're found to be using toxic language.
+* Rephrasing a post or article to use simpler words and concepts ("[explain like I'm 5](https://en.wiktionary.org/wiki/ELI5)").
 
 ## TODO
 
-- [Smart Datetime Picker](https://dub.co/blog/smart-datetime-picker) with [Chrono](https://git.new/chrono)
-- [midday-ai](https://github.com/midday-ai/midday) for smart filters idea.
+* [Smart Datetime Picker](https://dub.co/blog/smart-datetime-picker) with [Chrono](https://git.new/chrono)
+* [midday-ai](https://github.com/midday-ai/midday) for smart filters idea.
 
 ## Ref
 
-- <https://github.com/appwrite/console/blob/main/src/lib/commandCenter/panels/ai.svelte>
-- <https://dev.to/ptvty/next-level-web-applications-with-on-device-generative-ai-a-look-at-google-chromes-built-in-gemini-nano-llm-4bng>
-- <https://medium.com/google-cloud/deep-dive-into-function-calling-in-gemini-b62e2618e3a7>
-- <https://github.com/marketplace/models>
-- <https://github.com/jeasonstudio/chrome-ai>
+* <https://github.com/appwrite/console/blob/main/src/lib/commandCenter/panels/ai.svelte>
+* <https://dev.to/ptvty/next-level-web-applications-with-on-device-generative-ai-a-look-at-google-chromes-built-in-gemini-nano-llm-4bng>
+* <https://medium.com/google-cloud/deep-dive-into-function-calling-in-gemini-b62e2618e3a7>
+* <https://github.com/marketplace/models>
+* <https://github.com/jeasonstudio/chrome-ai>
