Update How it Works

- Add CloudOps Agent Overview

Signed-off-by: Choonho Son <choonho.son@snu.ac.kr>

data/howitworks/agent.yaml

@@ -2,17 +2,12 @@ enabled: true
 id: "portfolio"
 
 title:
-  name: "Generative Agent Behavior and Interaction"
+  name: "CloudOps Agent"
 
 content:
-  - image: "images/memory_retrieve.png"
-    title: "Step 1. Memory & Retrieve"
-    text: "The Memory & Retrieve stage involves the process of storing and recalling relevant information essential for efficient decision-making and task execution. During this phase, the agent utilizes its memory to retain key data points, configurations, past actions, and user preferences related to cloud operations. Subsequently, when prompted to perform a task or respond to a query, the agent retrieves pertinent information from its memory banks, enabling it to provide contextually relevant and accurate recommendations or actions. This iterative cycle of memory storage and retrieval enhances the agent's ability to learn from past experiences, adapt to evolving scenarios, and effectively assist users in managing their cloud resources."
-
-  - image: "images/reflect.png"
-    title: "Step 2. Reflect"
-    text: "The Reflect stage involves the critical process of analyzing past experiences, outcomes, and interactions to refine its decision-making and improve future performance. During this phase, the agent evaluates the effectiveness of its actions, identifies patterns, trends, and potential areas for optimization within the cloud environment. Through introspection and analysis, the agent gains insights into its own performance, as well as broader trends and challenges in cloud management. These insights inform the agent's ongoing learning and adaptation, enabling it to continually enhance its capabilities, strategies, and responses to better serve user needs and achieve desired outcomes in cloud operations."
-
-  - image: "images/plan_reacting.png"
-    title: "Step 3. Plan & Reacting"
-    text: " The Plan & React stage encompasses strategic planning and dynamic response mechanisms to effectively address evolving circumstances within the cloud environment. During this phase, the agent formulates proactive plans based on analysis of current and anticipated conditions, considering factors such as resource usage patterns, performance metrics, and user preferences. It also establishes reactive measures to swiftly respond to unforeseen events, anomalies, or changing user requirements. By continuously evaluating and adjusting its strategies in real-time, the agent optimizes resource allocation, ensures system stability, and enhances user satisfaction. This iterative process of planning and reacting enables the AI agent to efficiently manage cloud resources, mitigate risks, and deliver seamless operational performance."
+  - image: "images/how-it-works/agent_concept.png"
+    title: "Concept"
+    text: "While the basic operation of an LLM is to generate an appropriate output for the user's input prompt, the Agent is designed to perform complex and sophisticated thinking tasks. The Agent can execute detailed **planning** and **reasoning** to **accomplish** intricate goals.
+    
+    
+     The Agent thinks by considering the given tools and the current situation in order to perform the Task. This means that the **Agent plans and executes** for the given task. After that, the Agent prepares the necessary next action."

themes/up-business-theme/layouts/page/how-it-works.html

@@ -1,38 +1,3 @@
 {{ define "main" }}
-<div class="container">
-  <section class="section py-5">
-<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
-    <div class="carousel-indicators">
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-  </div>
-  <div class="row">
-    <div class="d-flex justify-content-center align-content-center">
-    <img src="/images/intro_step.png" class="img-fluid" alt="Steps" />
-    </div>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img src="/images/step.png" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="/images/step.png" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="/images/step.png" class="d-block w-100" alt="...">
-    </div>
-  </div>
-  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Previous</span>
-  </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Next</span>
-  </button>
-</div>
-    </section>
-</div>
  {{ with .Site.Data.howitworks.agent }}{{ partial "sections/agent.html" . }}{{ end }}
 {{ end }}

themes/up-business-theme/layouts/partials/sections/agent.html

@@ -32,7 +32,7 @@
           <h3 class="fs-1 fw-normal text-primary pb-3">{{ . }}</h3>
         {{ end }}
         {{ with .text }}
-          <p class="text-black-61 pb-3">{{ . }}</p>
+          <p class="text-black-61 pb-3">{{ . | markdownify }}</p>
         {{ end }}
         <div class="">
           {{ range .buttons }}