Skip to content

Instantly share code, notes, and snippets.

@darenr

darenr/index.html

Created November 8, 2024 17:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save darenr/dbcc01a7c25351e44bcbbd3d5bf530db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save darenr/dbcc01a7c25351e44bcbbd3d5bf530db to your computer and use it in GitHub Desktop.
Download ZIP
AutoGen Logs visualized
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
AutoGen Simple Interaction Report
</title>
<link href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;family=Noto+Sans:ital,wght@0,100..900;1,100..900&amp;family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Roboto+Slab:[email protected]&amp;family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;family=Source+Sans+3:ital,wght@0,200..900;1,200..900&amp;display=swap" rel="stylesheet"/>
<!-- hightlight.js -->
<!-- DataTable -->
<!-- Mermaid JS -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
</script>
<!-- Plotly -->
<!--
variables, for example: style: color: var(--links)
--background-body
--background
--background-alt
--selection
--text-main
--text-bright
--text-muted
--links
--focus
--border
--code
--animation-duration
--button-hover
--scrollbar-thumb
--scrollbar-thumb-hover
--form-placeholder
--form-text
--variable
--highlight
--select-arrow
https://github.com/kognise/water.css#theming
-->
<style>
:root {
--focus: red;
--button-hover: black;
}
html {
font-smooth: auto !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
input:disabled {
opacity: unset;
}
details {
background-color: var(--background-body);
margin: 0;
}
summary {
background-color: var(--background-body);
margin-left: -20px !important;
}
/* end water undos */
block {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-width: 0;
width: 100%;
flex-wrap: nowrap;
}
block-component {
display: flex;
flex-direction: column;
padding: 10px;
flex: 1;
align-items: stretch;
}
.group {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.group > * {
flex: 1 1 300px;
}
div.round-bordered {
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 20px;
}
.metric {
padding: 10px;
padding-left: 25px;
border: 1px solid var(--border);
border-radius: 0.75rem;
height: 100%;
width: 100%;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Source Sans 3", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: bold;
}
.metric p {
color: var(--text-main);
margin-top: 0;
}
.block-bordered {
border-left: 10px solid var(--focus) !important;
padding-left: 15px !important;
}
header {
align-items: center;
display: flex;
gap: 25px;
}
header .header-text h1 {
font-size: 65px;
}
header letter-icon {
display: flex;
flex-direction: column;
}
report-caption {
display: block;
margin-top: 0.75em;
margin-bottom: 1.2em;
font-size: 1.5em;
font-weight: bold;
border-left: 5px solid var(--focus);
padding-left: 15px;
}
report-caption a {
color: var(--text-bright);
}
report-text {
margin-top: 0.5em;
margin-bottom: 1.5em;
font-size: 1.1em;
}
caption {
margin-top: 0.5em;
margin-bottom: 1em;
font-size: 1.5em;
font-weight: bold;
border-left: 5px solid var(--focus);
padding-left: 15px;
}
select:not([multiple]):not([size]) {
padding-right: 1.5rem;
background-repeat: no-repeat;
background-position: right 0.75rem center;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
body {
max-width: 90%;
width: 90%;
margin: 20px auto;
padding-left: 5%;
padding-right: 5%;
font-family: "Source Sans 3", sans-serif;
}
/* Style the tab */
.tab {
overflow: hidden;
border-bottom: 3px solid var(--button-hover);
}
/* Style the buttons that are used to open the tab content */
.tab button {
font-weight: normal;
background: var(--background-body) !important;
color: var(--text-muted);
float: left;
cursor: pointer;
transition: 0.1s;
margin: 0 !important;
border-radius: 0;
border: none;
outline: none;
box-shadow: none !important;
}
.tab button:hover {
color: var(--text-bright);
}
.tab button.active {
background: var(--button-hover) !important;
color: white;
border-top-right-radius: 0.25em;
border-top-left-radius: 0.25em;
}
/* Style the tab content */
.tabcontent {
display: none;
width: 100%;
border: 0.5px solid var(--border);
box-sizing: border-box;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
padding: 20px;
}
.indented-text-block {
text-indent: 20px;
}
.diagram-block {
flex: 1;
box-sizing: border-box;
}
.diagram-block figure {
margin: 0 !important;
}
.image-block {
flex: 1;
box-sizing: border-box;
}
.image-block figure {
margin: 0 !important;
}
.image-block img {
height: 500px;
object-fit: scale-down;
}
div.markdown-wrapper {
flex: 1;
}
.rounded {
border-radius: 0.75rem;
}
div.markdown-wrapper pre {
white-space: pre-wrap;
}
.remove-all-styles {
all: unset;
display: block;
}
div.dt-search input {
all: unset;
}
div.dt-layout-cell caption {
border: unset;
padding: unset;
font-size: unset;
}
table.dataTable tbody tr {
font-weight: normal;
}
.code-block {
height: 100%;
box-sizing: border-box;
}
pre code.hljs {
border: 1px solid var(--border);
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
box-sizing: border-box;
}
.report-widget {
width: 100%;
}
.report-widget table {
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
overflow-x: auto;
white-space: nowrap;
border: none;
}
.component-description {
font-size: 0.8em;
color: var(--text-muted);
}
footer {
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<header>
<div class="letter-icon">
<svg height="150" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg">
<style>
.icon_text_style {
font-size: 5em;
stroke-width: 1px;
font-family: Arial, sans-serif;
font-weight: bold;
text-anchor: middle;
alignment-baseline: central;
}
</style>
<circle cx="75.0" cy="75.0" fill="#1e9400" r="75.0">
</circle>
<text class="icon_text_style" fill="white" x="50%" y="50%">
AG
</text>
</svg>
</div>
<div class="header-text">
<h1>
AutoGen Simple Interaction Report
</h1>
<p>
</p>
<p>
AutoGen 0.3.1
</p>
</div>
</header>
<hr/>
<div class="container">
<block>
<block-component>
<br/>
<h1>
AutoGen Simple Interaction Report
</h1>
<br/>
</block-component>
<block-component>
<div class="diagram-block">
<figure>
<figcaption>
<report-caption>
<a href="#9db219bf3fb755aeba9b597730f8e0df">
Event Frequency Flowchart
</a>
</report-caption>
</figcaption>
<div class="mermaid include_mermaid">
flowchart TD
UserMessage["User sends message (Count: 9)"] --&gt; AssistantReceive["Assistant receives message (Count: 9)"]
AssistantReceive --&gt; AssistantCheck["Assistant checks termination (Count: 8)"]
AssistantReceive --&gt; AssistantFunction["Assistant generates function call reply (Count: 8)"]
AssistantCheck --&gt; FinalReply["Generate final reply (Count: 25)"]
AssistantFunction --&gt; FinalReply
</div>
</figure>
</div>
</block-component>
<block-component>
<div class="diagram-block">
<figure>
<figcaption>
<report-caption>
<a href="#899b3651de5a5df99eadadefb5a80363">
Source-Event Mapping
</a>
</report-caption>
</figcaption>
<div class="mermaid include_mermaid">
flowchart LR
User["User"] --&gt;|sends| UserMessage["User sends message (Count: 9)"]
Assistant["Assistant"] --&gt;|receives| AssistantReceive["receives message (Count: 9)"]
Assistant --&gt;|checks| AssistantCheck["checks termination (Count: 8)"]
Assistant --&gt;|generates| AssistantFunction["function call reply (Count: 8)"]
Assistant --&gt;|replies| FinalReply["final reply (Count: 25)"]
</div>
</figure>
</div>
</block-component>
<block-component>
<div class="diagram-block">
<figure>
<figcaption>
<report-caption>
<a href="#df2c4d0d22495ddb967e54789e03ff91">
Common Transitions
</a>
</report-caption>
</figcaption>
<div class="mermaid include_mermaid">
flowchart TD
received_message["received_message"] --&gt;|Count: 8| reply_func_executed["reply_func_executed"]
received_message --&gt;|Count: 8| check_termination["check_termination"]
check_termination --&gt;|Count: 25| final_reply["Generate final reply"]
reply_func_executed --&gt;|Count: 25| final_reply
</div>
</figure>
</div>
</block-component>
<block-component>
<div class="diagram-block">
<figure>
<figcaption>
<report-caption>
<a href="#3c525566f35a53758fa40b9ed24c0cab">
Event Occurrence Timeline
</a>
</report-caption>
</figcaption>
<div class="mermaid include_mermaid">
gantt
dateFormat YYYY-MM-DD HH:mm
title Event Occurrence Over Time
section Event Activity
"User sends message" :done, a1, 2024-11-08 17:40, 10m
"Assistant receives message" :done, a2, 2024-11-08 17:41, 10m
"Assistant checks termination" :active, a3, 2024-11-08 17:42, 10m
"Function call reply" :done, a4, 2024-11-08 17:43, 10m
"Final reply generated" :done, a5, 2024-11-08 17:44, 10m
</div>
</figure>
</div>
</block-component>
</block>
</div>
<footer>
<p>
</p>
<p>
Made with
<code>
report-creator
</code>
</p>
</footer>
<script>
function triggerResize() {
window.dispatchEvent(new Event("resize"));
}
function openTab(evt, tabName, tableIndex) {
// Declare variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.querySelectorAll(
'.tabcontent[data-table-index="' + tableIndex + '"]'
);
// Hide all tab contents for the specified table index
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.querySelectorAll(
'.tablinks[data-table-index="' + tableIndex + '"]'
);
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// Show the current tab, and add an "active" class to the button that opened the tab
for (i = 0; i < tabcontent.length; i++) {
if (tabcontent[i].id == tabName) {
tabcontent[i].style.display = "block";
}
}
evt.currentTarget.classList.add("active");
triggerResize();
}
(function () {
// Initialize highlight.js, mermaid.js, dataTables.js etc conditionally
document.querySelectorAll(".defaultOpen").forEach(function (button) {
button.click();
});
mermaid.initialize({
startOnLoad: true,
securityLevel: "loose",
theme: "base",
});
// plotly doesn't properly resize on page load, so trigger responsive event
triggerResize();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment