From 510799fb98db03d74ecf7a26e7bfdeded5bf7067 Mon Sep 17 00:00:00 2001
From: Dimitar Danailov <dimityr.danailov@gmail.com>
Date: Sun, 21 Jul 2024 13:42:03 +0300
Subject: [PATCH] Application is able to define tags

---
 .../app/articles/2024/06/26/[slug]/Body.tsx   | 90 +++++++++++++++++++
 .../articles/2024/06/26/[slug]/Content.tsx    | 86 ++----------------
 .../app/articles/2024/06/26/[slug]/Tags.tsx   | 40 +++++++++
 3 files changed, 136 insertions(+), 80 deletions(-)
 create mode 100644 apps/website/src/app/articles/2024/06/26/[slug]/Body.tsx
 create mode 100644 apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx

diff --git a/apps/website/src/app/articles/2024/06/26/[slug]/Body.tsx b/apps/website/src/app/articles/2024/06/26/[slug]/Body.tsx
new file mode 100644
index 0000000..39380b8
--- /dev/null
+++ b/apps/website/src/app/articles/2024/06/26/[slug]/Body.tsx
@@ -0,0 +1,90 @@
+import Label from '@/components/SimpleLabel'
+
+const Body = () => {
+  const listStyle = 'list-disc mx-6 mt-0 mb-5'
+
+  return (
+    <>
+      <p>
+        A write-back cache is a type of caching mechanism where data
+        modifications are initially written to the cache rather than directly to
+        the main database. This approach enhances performance by reducing the
+        number of direct write operations to the database, as the cached data is
+        written back to the database at a later time. Write-back caching is
+        particularly beneficial in high-write frequency applications and
+        scenarios requiring quick data access and lower latency. However, it
+        requires careful management to ensure data consistency and integrity, as
+        there is a risk of data loss if the cache fails before the data is
+        written to the database.
+      </p>
+
+      <p className="mt-2">
+        <span className="font-bold text-lg">When to Use Write-Back Cache:</span>
+      </p>
+
+      <ul className={listStyle}>
+        <li>
+          <Label text="High Write Frequency" /> When the application has a high
+          volume of write operations, and performance is critical. The
+          write-back cache can reduce the number of write operations to the
+          database, thus improving performance.
+        </li>
+        <li>
+          <Label text="Batch Processing" /> In scenarios where data can be
+          processed in batches, such as analytics workloads where intermediate
+          results can be cached and written to the database later.
+        </li>
+        <li>
+          <Label text="Temporary Data Storage" /> When dealing with temporary
+          data that does not need immediate persistence, such as session data in
+          a web application.
+        </li>
+        <li>
+          <Label text="Network Latency" /> When the database is hosted on a
+          remote server, and reducing the number of network calls is beneficial.
+        </li>
+        <li>
+          <Label text="Cost Optimization" /> In cloud environments where
+          database writes incur cost, reducing the number of direct writes can
+          lead to cost savings.
+        </li>
+      </ul>
+
+      <p className="mt-1">
+        <span className="font-bold text-lg">
+          When to Avoid Write-Back Cache:
+        </span>
+      </p>
+
+      <ul className={listStyle}>
+        <li>
+          <Label text="Data Integrity Critical" /> When data integrity is
+          paramount, and any data loss due to cache failure is unacceptable,
+          such as in financial transactions.
+        </li>
+        <li>
+          <Label text="Low Write Frequency" /> In applications where write
+          operations are infrequent, the complexity and potential issues of
+          write-back caching may not be justified.
+        </li>
+        <li>
+          <Label text="Real-Time Systems" /> For real-time systems where
+          immediate data availability and consistency are required, such as live
+          trading platforms.
+        </li>
+        <li>
+          <Label text="High Volatility" /> When data changes frequently and
+          needs to be immediately reflected across all systems and users, like
+          collaborative editing tools.
+        </li>
+        <li>
+          <Label text="Simple Architectures" /> In simpler applications where
+          the overhead of managing a write-back cache might outweigh the
+          performance benefits.
+        </li>
+      </ul>
+    </>
+  )
+}
+
+export default Body
diff --git a/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx b/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx
index f0f2321..316bf30 100644
--- a/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx
+++ b/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx
@@ -2,100 +2,26 @@
 
 import {Slogan} from '@/styled-components'
 
-import Label from '@/components/SimpleLabel'
 import TopicAnalysisTable from '@/components/TopicAnalysisTable'
+import Body from './Body'
 
 // import Mermaid from './Mermaid'
 
 import {slogan} from './seo'
 import {topicAnalysis} from './db'
+
+import Tags from './Tags'
+
 // import diagram from './diagram'
 
 const Content = () => {
-  const listStyle = 'list-disc mx-6 mt-0 mb-5'
-
   return (
     <article>
+      <Tags component="test" />
       <Slogan>{slogan}</Slogan>
 
-      <p>
-        A write-back cache is a type of caching mechanism where data
-        modifications are initially written to the cache rather than directly to
-        the main database. This approach enhances performance by reducing the
-        number of direct write operations to the database, as the cached data is
-        written back to the database at a later time. Write-back caching is
-        particularly beneficial in high-write frequency applications and
-        scenarios requiring quick data access and lower latency. However, it
-        requires careful management to ensure data consistency and integrity, as
-        there is a risk of data loss if the cache fails before the data is
-        written to the database.
-      </p>
-
-      <p className="mt-2">
-        <span className="font-bold text-lg">When to Use Write-Back Cache:</span>
-      </p>
-
-      <ul className={listStyle}>
-        <li>
-          <Label text="High Write Frequency" /> When the application has a high
-          volume of write operations, and performance is critical. The
-          write-back cache can reduce the number of write operations to the
-          database, thus improving performance.
-        </li>
-        <li>
-          <Label text="Batch Processing" /> In scenarios where data can be
-          processed in batches, such as analytics workloads where intermediate
-          results can be cached and written to the database later.
-        </li>
-        <li>
-          <Label text="Temporary Data Storage" /> When dealing with temporary
-          data that does not need immediate persistence, such as session data in
-          a web application.
-        </li>
-        <li>
-          <Label text="Network Latency" /> When the database is hosted on a
-          remote server, and reducing the number of network calls is beneficial.
-        </li>
-        <li>
-          <Label text="Cost Optimization" /> In cloud environments where
-          database writes incur cost, reducing the number of direct writes can
-          lead to cost savings.
-        </li>
-      </ul>
-
-      <p className="mt-1">
-        <span className="font-bold text-lg">
-          When to Avoid Write-Back Cache:
-        </span>
-      </p>
+      <Body />
 
-      <ul className={listStyle}>
-        <li>
-          <Label text="Data Integrity Critical" /> When data integrity is
-          paramount, and any data loss due to cache failure is unacceptable,
-          such as in financial transactions.
-        </li>
-        <li>
-          <Label text="Low Write Frequency" /> In applications where write
-          operations are infrequent, the complexity and potential issues of
-          write-back caching may not be justified.
-        </li>
-        <li>
-          <Label text="Real-Time Systems" /> For real-time systems where
-          immediate data availability and consistency are required, such as live
-          trading platforms.
-        </li>
-        <li>
-          <Label text="v" /> When data changes frequently and needs to be
-          immediately reflected across all systems and users, like collaborative
-          editing tools.
-        </li>
-        <li>
-          <Label text="Simple Architectures" /> In simpler applications where
-          the overhead of managing a write-back cache might outweigh the
-          performance benefits.
-        </li>
-      </ul>
       <TopicAnalysisTable topicAnalysis={topicAnalysis} />
     </article>
   )
diff --git a/apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx b/apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx
new file mode 100644
index 0000000..538984d
--- /dev/null
+++ b/apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import {FC, useEffect, useState} from 'react'
+
+import {createGoogleGenerativeAI} from '@ai-sdk/google'
+import {generateText} from 'ai'
+
+import Body from './Body'
+
+export interface Props {
+  component: string
+}
+
+const Tags: FC<Props> = ({component}) => {
+  const [aiTags, setPromtPresponse] = useState<Array<string>>([])
+
+  console.log('Body', Body)
+
+  useEffect(() => {
+    if (aiTags.length > 0) return
+
+    const google = createGoogleGenerativeAI({
+      apiKey: process.env.NEXT_PUBLIC_GOOGLE_AI_KEY,
+    })
+    const model = google('models/gemini-pro')
+
+    generateText({
+      model,
+      prompt: `From the following react component: ${Body} please create five tags. Tags should be return as a plain text seperated with with comma`,
+    }).then(response => {
+      const tags = response.text.split(',')
+
+      setPromtPresponse(tags)
+    })
+  }, [aiTags])
+
+  return <>{aiTags.join(',')}</>
+}
+
+export default Tags