From da6432671a3ee612074b13c72fd1b11cbb611f2c Mon Sep 17 00:00:00 2001
From: Kritin Vongthongsri <73642562+kritinv@users.noreply.github.com>
Date: Tue, 22 Oct 2024 01:31:23 +0700
Subject: [PATCH] synth docs edit

---
 .../evaluation-datasets-synthetic-data.mdx    | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/docs/docs/evaluation-datasets-synthetic-data.mdx b/docs/docs/evaluation-datasets-synthetic-data.mdx
index 7cd1b1a04..26c0556dc 100644
--- a/docs/docs/evaluation-datasets-synthetic-data.mdx
+++ b/docs/docs/evaluation-datasets-synthetic-data.mdx
@@ -34,14 +34,15 @@ To generate contexts from user-provided documents, the documents are first split
   style={{
     display: "flex",
     alignItems: "center",
-    justifyContent: "start",
+    justifyContent: "center",
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/generate_from_docs.png"
+    src="https://confident-bucket.s3.amazonaws.com/generate_from_docs.svg"
     alt="LangChain"
     style={{
-      marginTop: "-20px",
+      marginTop: "20px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "800px",
     }}
@@ -60,15 +61,15 @@ If you already have access to prepared contexts, you can skip the document proce
   style={{
     display: "flex",
     alignItems: "center",
-    justifyContent: "start",
+    justifyContent: "center",
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/generate_from_contexts.png"
+    src="https://confident-bucket.s3.amazonaws.com/generate_from_contexts.svg"
     alt="LangChain"
     style={{
-      marginTop: "-20px",
-      marginBottom: "-40px",
+      marginTop: "20px",
+      marginBottom: "20px",
       height: "auto",
       maxHeight: "800px",
     }}
@@ -87,14 +88,15 @@ This approach is particularly useful if your LLM application **doesn’t rely on
   style={{
     display: "flex",
     alignItems: "center",
-    justifyContent: "start",
+    justifyContent: "center",
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/generate_from_scratch.png"
+    src="https://confident-bucket.s3.amazonaws.com/generate_from_scratch.svg"
     alt="LangChain"
     style={{
-      marginTop: "-20px",
+      marginTop: "50px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "800px",
     }}
@@ -184,10 +186,11 @@ Context filtering is only applicable when using the `generate_from_docs` method.
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/filtering_context.png"
+    src="https://confident-bucket.s3.amazonaws.com/filtering_context.svg"
     alt="LangChain"
     style={{
-      marginTop: "-20px",
+      marginTop: "50px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "800px",
     }}
@@ -207,10 +210,11 @@ Context filtering is only applicable when using the `generate_from_docs` method.
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/filtering_input.png"
+    src="https://confident-bucket.s3.amazonaws.com/filtering_input.svg"
     alt="LangChain"
     style={{
-      marginBottom: "20px",
+      marginTop: "50px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "800px",
     }}
@@ -300,10 +304,11 @@ For example, a Golden might take the following evolution route when `num_evoluti
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/evolutions.png"
+    src="https://confident-bucket.s3.amazonaws.com/evolutions.svg"
     alt="LangChain"
     style={{
-      marginBottom: "20px",
+      marginTop: "20px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "400px",
     }}
@@ -341,9 +346,11 @@ The scenario, task, and input format parameters are used to enforce the input st
   }}
 >
   <img
-    src="https://confident-bucket.s3.amazonaws.com/synthesizer_customization.png"
+    src="https://confident-bucket.s3.amazonaws.com/synthesizer_customization.svg"
     alt="LangChain"
     style={{
+      marginTop: "50px",
+      marginBottom: "50px",
       height: "auto",
       maxHeight: "800px",
     }}