Observability blog post styling hot fix (#3234)

* update markdown hyperlinks to stable urls

* update notebook images and text

* re-write observability section

* Updated section

* update wording

* added newline

* update styling in image tags to be jsx compatible

* added text

* update link

* simplified text

* created blog

* replace flow images with fewer shadows

* reformat line

* add authors

* updated discord link and direct paths to image URLS

* removed images since they are not stored in the AgentOps github

* remove trailing whitespaces

* removed newline

* removed whitespace

* Update website/blog/2024-07-25-AgentOps/index.mdx

Co-authored-by: Mark Sze <[email protected]>

* single quotes with double quotes

* fix widths

---------

Co-authored-by: Braelyn Boynton <[email protected]>
Co-authored-by: Mark Sze <[email protected]>

Author: 3 people

website/blog/2024-07-25-AgentOps/index.mdx

@@ -7,7 +7,7 @@ tags: [LLM,Agent,Observability,AutoGen,AgentOps]
 ---
 
 # AgentOps, the Best Tool for AutoGen Agent Observability
-<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/autogen-integration.png?raw=true" alt="AgentOps and AutoGen" style={{ maxWidth: "30%" }} />
+<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/autogen-integration.png?raw=true" alt="AgentOps and AutoGen" style={{ maxWidth: "50%" }} />
 
 ## TL;DR
 * AutoGen® offers detailed multi-agent observability with AgentOps.
@@ -24,13 +24,13 @@ As agents evolve into even more powerful and complex tools, you should view them
 
 Agent observability, in its most basic form, allows you to monitor, troubleshoot, and clarify the actions of your agent during its operation. The ability to observe every detail of your agent's activity, right down to a timestamp, enables you to trace its actions precisely, identify areas for improvement, and understand the reasons behind any failures — a key aspect of effective debugging. Beyond enhancing diagnostic precision, this level of observability is integral for your system's reliability. Think of it as the ability to identify and address issues before they spiral out of control. Observability isn't just about keeping things running smoothly and maximizing uptime; it's about strengthening your agent-based solutions.
 
-<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/flow.png?raw=true" alt="AI agent observability" style={{ maxWidth: "30%" }} />
+<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/flow.png?raw=true" alt="AI agent observability" style={{ maxWidth: "100%" }} />
 
 ## Why AgentOps?
 
 AutoGen has simplified the process of building agents, yet we recognized the need for an easy-to-use, native tool for observability. We've previously discussed AgentOps, and now we're excited to partner with AgentOps as our official agent observability tool. Integrating AgentOps with AutoGen simplifies your workflow and boosts your agents' performance through clear observability, ensuring they operate optimally. For more details, check out our [AgentOps documentation](https://microsoft.github.io/autogen/docs/notebooks/agentchat_agentops/).
 
-<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/session-replay.png?raw=true" alt="Agent Session Replay" style={{ maxWidth: "40%" }} />
+<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/session-replay.png?raw=true" alt="Agent Session Replay" style={{ maxWidth: "100%" }} />
 
 Enterprises and enthusiasts trust AutoGen as the leader in building agents. With our partnership with AgentOps, developers can now natively debug agents for efficiency and ensure compliance, providing a comprehensive audit trail for all of your agents' activities. AgentOps allows you to monitor LLM calls, costs, latency, agent failures, multi-agent interactions, tool usage, session-wide statistics, and more all from one dashboard.
 
@@ -48,7 +48,7 @@ agentops.init(os.environ["AGENTOPS_API_KEY"])
 
 AgentOps includes all the functionality you need to ensure your agents are suitable for real-world, scalable solutions.
 
-<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/dashboard.png?raw=true" alt="AgentOps overview dashboard" style={{ maxWidth: "40%" }} />
+<img src="https://github.com/AgentOps-AI/agentops/blob/main/docs/images/external/autogen/dashboard.png?raw=true" alt="AgentOps overview dashboard" style={{ maxWidth: "100%" }} />
 
 * **Analytics Dashboard:** The AgentOps Analytics Dashboard allows you to configure and assign agents and automatically track what actions each agent is taking simultaneously. When used with AutoGen, AgentOps is automatically configured for multi-agent compatibility, allowing users to track multiple agents across runs easily. Instead of a terminal-level screen, AgentOps provides a superior user experience with its intuitive interface.
 * **Tracking LLM Costs:** Cost tracking is natively set up within AgentOps and provides a rolling total. This allows developers to see and track their run costs and accurately predict future costs.