change images

docs/docs/guidelines/custom-component.mdx

@@ -21,35 +21,52 @@ Let's take a look at the basic rules and features. Then we'll go over an example
 - Use the _`build_config`_ method to customize how these fields look and behave.
 
 Here is an example:
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
+    <CH.Code linuNumbers={false}>
 
-<CH.Code linuNumbers={false}>
+    ```python
+    from langflow import CustomComponent
+    from langchain.schema import Document
 
-```python
+    class DocumentProcessor(CustomComponent):
-from langflow import CustomComponent
+        display_name = "Document Processor"
-from langchain.schema import Document
+        description = "This component processes a document"
 
-class DocumentProcessor(CustomComponent):
+        def build_config(self) -> dict:
-    display_name = "Document Processor"
+            options = ["Uppercase", "Lowercase", "Titlecase"]
-    description = "This component processes a document"
+            return {
+                "function": {"options": options,
+                        "value": options[0]}}
 
-    def build_config(self) -> dict:
+        def build(self, document: Document, function: str) -> Document:
-        options = ["Uppercase", "Lowercase", "Titlecase"]
+            page_content = document.page_content
-        return {
+            if function == "Uppercase":
-            "function": {"options": options,
+                page_content = page_content.upper()
-                     "value": options[0]}}
+            elif function == "Lowercase":
+                page_content = page_content.lower()
+            elif function == "Titlecase":
+                page_content = page_content.title()
+            return Document(page_content=page_content)
+    ```
 
-    def build(self, document: Document, function: str) -> Document:
+    </CH.Code>
-        page_content = document.page_content
-        if function == "Uppercase":
-            page_content = page_content.upper()
-        elif function == "Lowercase":
-            page_content = page_content.lower()
-        elif function == "Titlecase":
-            page_content = page_content.title()
-        return Document(page_content=page_content)
-```
 
-</CH.Code>
+    <ZoomableImage
+    alt="Document Processor Component"
+    sources={{
+        light: "img/document_processor.png",
+    }}
+    style={{
+        width: "40%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+    />
+</div>
 
 <Admonition type="tip">
   Check out [FlowRunner Component](../examples/flow-runner) for a more complex
@@ -289,39 +306,42 @@ class DocumentProcessor(CustomComponent):
 
 </CH.Scrollycoding>
 
-In Langflow, this is how our script looks like:
 
-{" "}
+All done! This is what our script and brand-new custom component look like:
 
-<ZoomableImage
+<div style={{
-  alt="Document Processor code"
+        display: "flex",
-  sources={{
+        justifyContent: "center",
-    light: "img/document_processor_code.png",
+    }}>
-  }}
+
-  style={{
+    <ZoomableImage
-    maxWidth: "70%",
+    alt="Document Processor Code"
-    margin: "0 auto",
+    sources={{
-    display: "flex",
+        light: "img/document_processor_code.png",
-    justifyContent: "center",
+    }}
-  }}
+    style={{
+        maxWidth: "100%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
 />
 
-And there is our brand new custom component:
 
-{" "}
 
-<ZoomableImage
+    <ZoomableImage
-  alt="Document Processor component"
+    alt="Document Processor Component"
-  sources={{
+    sources={{
-    light: "img/document_processor.png",
+        light: "img/document_processor.png",
-  }}
+    }}
-  style={{
+    style={{
-    width: "50%",
+        width: "40%",
-    margin: "0 auto",
+        margin: "0 auto",
-    display: "flex",
+        display: "flex",
-    justifyContent: "center",
+        justifyContent: "center",
-  }}
+    }}
-/>
+    />
+</div>
 
 
 <Admonition type="tip" label="Tip">