mediaproc/docs/architecture/01a-local-architecture.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 14.1.2 (0)
 -->
<!-- Title: local_architecture Pages: 1 -->
<svg width="667pt" height="1108pt"
 viewBox="0.00 0.00 667.00 1108.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1103.51)">
<title>local_architecture</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-1103.51 663,-1103.51 663,4 -4,4"/>
<text xml:space="preserve" text-anchor="middle" x="329.5" y="-1080.31" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">MPR &#45; Local Architecture (Celery + MinIO)</text>
<g id="clust1" class="cluster">
<title>cluster_external</title>
<polygon fill="none" stroke="gray" stroke-dasharray="5,2" points="270,-960.41 270,-1064.01 424,-1064.01 424,-960.41 270,-960.41"/>
<text xml:space="preserve" text-anchor="middle" x="347" y="-1044.81" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">External</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_proxy</title>
<polygon fill="#e8f4f8" stroke="black" points="274,-832.66 274,-918.66 420,-918.66 420,-832.66 274,-832.66"/>
<text xml:space="preserve" text-anchor="middle" x="347" y="-899.46" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">Reverse Proxy</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_apps</title>
<polygon fill="#f0f8e8" stroke="black" points="19,-556.16 19,-802.66 301,-802.66 301,-556.16 19,-556.16"/>
<text xml:space="preserve" text-anchor="middle" x="160" y="-783.46" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">Application Layer</text>
</g>
<g id="clust4" class="cluster">
<title>cluster_workers</title>
<polygon fill="#fff8e8" stroke="black" points="188,-302.41 188,-501.66 364,-501.66 364,-302.41 188,-302.41"/>
<text xml:space="preserve" text-anchor="middle" x="276" y="-482.46" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">Worker Layer</text>
</g>
<g id="clust5" class="cluster">
<title>cluster_data</title>
<polygon fill="#f8e8f0" stroke="black" points="8,-109.5 8,-235.16 286,-235.16 286,-109.5 8,-109.5"/>
<text xml:space="preserve" text-anchor="middle" x="147" y="-215.96" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">Data Layer</text>
</g>
<g id="clust6" class="cluster">
<title>cluster_storage</title>
<polygon fill="#f0f0f0" stroke="black" points="319,-8 319,-223.95 651,-223.95 651,-8 319,-8"/>
<text xml:space="preserve" text-anchor="middle" x="485" y="-204.75" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="16.00">S3 Storage (MinIO)</text>
</g>
<!-- browser -->
<g id="node1" class="node">
<title>browser</title>
<ellipse fill="none" stroke="black" cx="347" cy="-998.46" rx="69.12" ry="30.05"/>
<text xml:space="preserve" text-anchor="middle" x="347" y="-1002.41" font-family="Helvetica,sans-Serif" font-size="14.00">Browser</text>
<text xml:space="preserve" text-anchor="middle" x="347" y="-985.16" font-family="Helvetica,sans-Serif" font-size="14.00">mpr.local.ar</text>
</g>
<!-- nginx -->
<g id="node2" class="node">
<title>nginx</title>
<path fill="none" stroke="black" d="M368.5,-883.16C368.5,-883.16 325.5,-883.16 325.5,-883.16 319.5,-883.16 313.5,-877.16 313.5,-871.16 313.5,-871.16 313.5,-852.66 313.5,-852.66 313.5,-846.66 319.5,-840.66 325.5,-840.66 325.5,-840.66 368.5,-840.66 368.5,-840.66 374.5,-840.66 380.5,-846.66 380.5,-852.66 380.5,-852.66 380.5,-871.16 380.5,-871.16 380.5,-877.16 374.5,-883.16 368.5,-883.16"/>
<text xml:space="preserve" text-anchor="middle" x="347" y="-865.86" font-family="Helvetica,sans-Serif" font-size="14.00">nginx</text>
<text xml:space="preserve" text-anchor="middle" x="347" y="-848.61" font-family="Helvetica,sans-Serif" font-size="14.00">port 80</text>
</g>
<!-- browser&#45;&gt;nginx -->
<g id="edge1" class="edge">
<title>browser&#45;&gt;nginx</title>
<path fill="none" stroke="black" d="M347,-968.15C347,-968.15 347,-895.16 347,-895.16"/>
<polygon fill="black" stroke="black" points="350.5,-895.16 347,-885.16 343.5,-895.16 350.5,-895.16"/>
<text xml:space="preserve" text-anchor="middle" x="359.75" y="-929.91" font-family="Helvetica,sans-Serif" font-size="10.00">HTTP</text>
</g>
<!-- django -->
<g id="node3" class="node">
<title>django</title>
<path fill="none" stroke="black" d="M128.75,-767.16C128.75,-767.16 39.25,-767.16 39.25,-767.16 33.25,-767.16 27.25,-761.16 27.25,-755.16 27.25,-755.16 27.25,-719.41 27.25,-719.41 27.25,-713.41 33.25,-707.41 39.25,-707.41 39.25,-707.41 128.75,-707.41 128.75,-707.41 134.75,-707.41 140.75,-713.41 140.75,-719.41 140.75,-719.41 140.75,-755.16 140.75,-755.16 140.75,-761.16 134.75,-767.16 128.75,-767.16"/>
<text xml:space="preserve" text-anchor="middle" x="84" y="-749.86" font-family="Helvetica,sans-Serif" font-size="14.00">Django Admin</text>
<text xml:space="preserve" text-anchor="middle" x="84" y="-732.61" font-family="Helvetica,sans-Serif" font-size="14.00">/admin</text>
<text xml:space="preserve" text-anchor="middle" x="84" y="-715.36" font-family="Helvetica,sans-Serif" font-size="14.00">port 8701</text>
</g>
<!-- nginx&#45;&gt;django -->
<g id="edge2" class="edge">
<title>nginx&#45;&gt;django</title>
<path fill="none" stroke="black" d="M313.16,-869C242.12,-869 84,-869 84,-869 84,-869 84,-779.01 84,-779.01"/>
<polygon fill="black" stroke="black" points="87.5,-779.01 84,-769.01 80.5,-779.01 87.5,-779.01"/>
<text xml:space="preserve" text-anchor="middle" x="136.71" y="-872.25" font-family="Helvetica,sans-Serif" font-size="10.00">/admin</text>
</g>
<!-- fastapi -->
<g id="node4" class="node">
<title>fastapi</title>
<path fill="none" stroke="black" d="M281.38,-623.91C281.38,-623.91 156.62,-623.91 156.62,-623.91 150.62,-623.91 144.62,-617.91 144.62,-611.91 144.62,-611.91 144.62,-576.16 144.62,-576.16 144.62,-570.16 150.62,-564.16 156.62,-564.16 156.62,-564.16 281.38,-564.16 281.38,-564.16 287.38,-564.16 293.38,-570.16 293.38,-576.16 293.38,-576.16 293.38,-611.91 293.38,-611.91 293.38,-617.91 287.38,-623.91 281.38,-623.91"/>
<text xml:space="preserve" text-anchor="middle" x="219" y="-606.61" font-family="Helvetica,sans-Serif" font-size="14.00">FastAPI + GraphQL</text>
<text xml:space="preserve" text-anchor="middle" x="219" y="-589.36" font-family="Helvetica,sans-Serif" font-size="14.00">/api + /graphql</text>
<text xml:space="preserve" text-anchor="middle" x="219" y="-572.11" font-family="Helvetica,sans-Serif" font-size="14.00">port 8702</text>
</g>
<!-- nginx&#45;&gt;fastapi -->
<g id="edge3" class="edge">
<title>nginx&#45;&gt;fastapi</title>
<path fill="none" stroke="black" d="M334.56,-840.44C334.56,-776.86 334.56,-594 334.56,-594 334.56,-594 305.33,-594 305.33,-594"/>
<polygon fill="black" stroke="black" points="305.33,-590.5 295.33,-594 305.33,-597.5 305.33,-590.5"/>
<text xml:space="preserve" text-anchor="middle" x="302.69" y="-693.1" font-family="Helvetica,sans-Serif" font-size="10.00">/api, /graphql</text>
</g>
<!-- timeline -->
<g id="node5" class="node">
<title>timeline</title>
<path fill="none" stroke="black" d="M281,-767.16C281,-767.16 211,-767.16 211,-767.16 205,-767.16 199,-761.16 199,-755.16 199,-755.16 199,-719.41 199,-719.41 199,-713.41 205,-707.41 211,-707.41 211,-707.41 281,-707.41 281,-707.41 287,-707.41 293,-713.41 293,-719.41 293,-719.41 293,-755.16 293,-755.16 293,-761.16 287,-767.16 281,-767.16"/>
<text xml:space="preserve" text-anchor="middle" x="246" y="-749.86" font-family="Helvetica,sans-Serif" font-size="14.00">Timeline UI</text>
<text xml:space="preserve" text-anchor="middle" x="246" y="-732.61" font-family="Helvetica,sans-Serif" font-size="14.00">/</text>
<text xml:space="preserve" text-anchor="middle" x="246" y="-715.36" font-family="Helvetica,sans-Serif" font-size="14.00">port 5173</text>
</g>
<!-- nginx&#45;&gt;timeline -->
<g id="edge4" class="edge">
<title>nginx&#45;&gt;timeline</title>
<path fill="none" stroke="black" d="M313.34,-855C298.97,-855 285.44,-855 285.44,-855 285.44,-855 285.44,-779.11 285.44,-779.11"/>
<polygon fill="black" stroke="black" points="288.94,-779.11 285.44,-769.11 281.94,-779.11 288.94,-779.11"/>
<text xml:space="preserve" text-anchor="middle" x="283.94" y="-834.25" font-family="Helvetica,sans-Serif" font-size="10.00">/</text>
</g>
<!-- minio -->
<g id="node10" class="node">
<title>minio</title>
<polygon fill="none" stroke="black" points="486.38,-188.45 483.38,-192.45 462.38,-192.45 459.38,-188.45 343.62,-188.45 343.62,-128.7 486.38,-128.7 486.38,-188.45"/>
<text xml:space="preserve" text-anchor="middle" x="415" y="-171.15" font-family="Helvetica,sans-Serif" font-size="14.00">MinIO</text>
<text xml:space="preserve" text-anchor="middle" x="415" y="-153.9" font-family="Helvetica,sans-Serif" font-size="14.00">S3&#45;compatible API</text>
<text xml:space="preserve" text-anchor="middle" x="415" y="-136.65" font-family="Helvetica,sans-Serif" font-size="14.00">port 9000</text>
</g>
<!-- nginx&#45;&gt;minio -->
<g id="edge5" class="edge">
<title>nginx&#45;&gt;minio</title>
<path fill="none" stroke="black" d="M368.06,-840.47C368.06,-840.47 368.06,-200.34 368.06,-200.34"/>
<polygon fill="black" stroke="black" points="371.56,-200.34 368.06,-190.34 364.56,-200.34 371.56,-200.34"/>
<text xml:space="preserve" text-anchor="middle" x="347.06" y="-523.66" font-family="Helvetica,sans-Serif" font-size="10.00">/media/*</text>
</g>
<!-- postgres -->
<g id="node8" class="node">
<title>postgres</title>
<path fill="none" stroke="black" d="M111.75,-182.48C111.75,-185.42 90.35,-187.8 64,-187.8 37.65,-187.8 16.25,-185.42 16.25,-182.48 16.25,-182.48 16.25,-134.67 16.25,-134.67 16.25,-131.74 37.65,-129.36 64,-129.36 90.35,-129.36 111.75,-131.74 111.75,-134.67 111.75,-134.67 111.75,-182.48 111.75,-182.48"/>
<path fill="none" stroke="black" d="M111.75,-182.48C111.75,-179.55 90.35,-177.17 64,-177.17 37.65,-177.17 16.25,-179.55 16.25,-182.48"/>
<text xml:space="preserve" text-anchor="middle" x="64" y="-162.53" font-family="Helvetica,sans-Serif" font-size="14.00">PostgreSQL</text>
<text xml:space="preserve" text-anchor="middle" x="64" y="-145.28" font-family="Helvetica,sans-Serif" font-size="14.00">port 5436</text>
</g>
<!-- django&#45;&gt;postgres -->
<g id="edge7" class="edge">
<title>django&#45;&gt;postgres</title>
<path fill="none" stroke="black" d="M55.42,-706.98C55.42,-706.98 55.42,-199.74 55.42,-199.74"/>
<polygon fill="black" stroke="black" points="58.92,-199.74 55.42,-189.74 51.92,-199.74 58.92,-199.74"/>
</g>
<!-- grpc_server -->
<g id="node6" class="node">
<title>grpc_server</title>
<path fill="none" stroke="black" d="M296.5,-466.16C296.5,-466.16 217.5,-466.16 217.5,-466.16 211.5,-466.16 205.5,-460.16 205.5,-454.16 205.5,-454.16 205.5,-435.66 205.5,-435.66 205.5,-429.66 211.5,-423.66 217.5,-423.66 217.5,-423.66 296.5,-423.66 296.5,-423.66 302.5,-423.66 308.5,-429.66 308.5,-435.66 308.5,-435.66 308.5,-454.16 308.5,-454.16 308.5,-460.16 302.5,-466.16 296.5,-466.16"/>
<text xml:space="preserve" text-anchor="middle" x="257" y="-448.86" font-family="Helvetica,sans-Serif" font-size="14.00">gRPC Server</text>
<text xml:space="preserve" text-anchor="middle" x="257" y="-431.61" font-family="Helvetica,sans-Serif" font-size="14.00">port 50051</text>
</g>
<!-- fastapi&#45;&gt;grpc_server -->
<g id="edge9" class="edge">
<title>fastapi&#45;&gt;grpc_server</title>
<path fill="none" stroke="black" d="M249.44,-563.85C249.44,-563.85 249.44,-477.88 249.44,-477.88"/>
<polygon fill="black" stroke="black" points="252.94,-477.88 249.44,-467.88 245.94,-477.88 252.94,-477.88"/>
<text xml:space="preserve" text-anchor="middle" x="276" y="-525.66" font-family="Helvetica,sans-Serif" font-size="10.00">gRPC</text>
<text xml:space="preserve" text-anchor="middle" x="276" y="-512.91" font-family="Helvetica,sans-Serif" font-size="10.00">progress updates</text>
</g>
<!-- fastapi&#45;&gt;postgres -->
<g id="edge8" class="edge">
<title>fastapi&#45;&gt;postgres</title>
<path fill="none" stroke="black" d="M157.25,-563.79C157.25,-465.13 157.25,-159 157.25,-159 157.25,-159 123.5,-159 123.5,-159"/>
<polygon fill="black" stroke="black" points="123.5,-155.5 113.5,-159 123.5,-162.5 123.5,-155.5"/>
<text xml:space="preserve" text-anchor="middle" x="82.38" y="-385.16" font-family="Helvetica,sans-Serif" font-size="10.00">read/write jobs</text>
</g>
<!-- timeline&#45;&gt;fastapi -->
<g id="edge6" class="edge">
<title>timeline&#45;&gt;fastapi</title>
<path fill="none" stroke="black" d="M246,-707.25C246,-707.25 246,-635.54 246,-635.54"/>
<polygon fill="black" stroke="black" points="249.5,-635.54 246,-625.54 242.5,-635.54 249.5,-635.54"/>
<text xml:space="preserve" text-anchor="middle" x="253.75" y="-668.91" font-family="Helvetica,sans-Serif" font-size="10.00">REST API</text>
<text xml:space="preserve" text-anchor="middle" x="253.75" y="-656.16" font-family="Helvetica,sans-Serif" font-size="10.00">GraphQL</text>
</g>
<!-- celery -->
<g id="node7" class="node">
<title>celery</title>
<path fill="none" stroke="black" d="M343.62,-352.91C343.62,-352.91 208.38,-352.91 208.38,-352.91 202.38,-352.91 196.38,-346.91 196.38,-340.91 196.38,-340.91 196.38,-322.41 196.38,-322.41 196.38,-316.41 202.38,-310.41 208.38,-310.41 208.38,-310.41 343.62,-310.41 343.62,-310.41 349.62,-310.41 355.62,-316.41 355.62,-322.41 355.62,-322.41 355.62,-340.91 355.62,-340.91 355.62,-346.91 349.62,-352.91 343.62,-352.91"/>
<text xml:space="preserve" text-anchor="middle" x="276" y="-335.61" font-family="Helvetica,sans-Serif" font-size="14.00">Celery Worker</text>
<text xml:space="preserve" text-anchor="middle" x="276" y="-318.36" font-family="Helvetica,sans-Serif" font-size="14.00">FFmpeg transcoding</text>
</g>
<!-- grpc_server&#45;&gt;celery -->
<g id="edge10" class="edge">
<title>grpc_server&#45;&gt;celery</title>
<path fill="none" stroke="black" d="M257,-423.34C257,-423.34 257,-364.66 257,-364.66"/>
<polygon fill="black" stroke="black" points="260.5,-364.66 257,-354.66 253.5,-364.66 260.5,-364.66"/>
<text xml:space="preserve" text-anchor="middle" x="300.25" y="-385.16" font-family="Helvetica,sans-Serif" font-size="10.00">dispatch tasks</text>
</g>
<!-- celery&#45;&gt;postgres -->
<g id="edge12" class="edge">
<title>celery&#45;&gt;postgres</title>
<path fill="none" stroke="black" d="M196.07,-332C143.2,-332 83.58,-332 83.58,-332 83.58,-332 83.58,-199.51 83.58,-199.51"/>
<polygon fill="black" stroke="black" points="87.08,-199.51 83.58,-189.51 80.08,-199.51 87.08,-199.51"/>
<text xml:space="preserve" text-anchor="middle" x="181.38" y="-259.16" font-family="Helvetica,sans-Serif" font-size="10.00">update job status</text>
</g>
<!-- redis -->
<g id="node9" class="node">
<title>redis</title>
<path fill="none" stroke="black" d="M278.12,-192.19C278.12,-196.31 253.87,-199.66 224,-199.66 194.13,-199.66 169.88,-196.31 169.88,-192.19 169.88,-192.19 169.88,-124.97 169.88,-124.97 169.88,-120.85 194.13,-117.5 224,-117.5 253.87,-117.5 278.12,-120.85 278.12,-124.97 278.12,-124.97 278.12,-192.19 278.12,-192.19"/>
<path fill="none" stroke="black" d="M278.12,-192.19C278.12,-188.07 253.87,-184.72 224,-184.72 194.13,-184.72 169.88,-188.07 169.88,-192.19"/>
<text xml:space="preserve" text-anchor="middle" x="224" y="-171.15" font-family="Helvetica,sans-Serif" font-size="14.00">Redis</text>
<text xml:space="preserve" text-anchor="middle" x="224" y="-153.9" font-family="Helvetica,sans-Serif" font-size="14.00">Celery queue</text>
<text xml:space="preserve" text-anchor="middle" x="224" y="-136.65" font-family="Helvetica,sans-Serif" font-size="14.00">port 6381</text>
</g>
<!-- celery&#45;&gt;redis -->
<g id="edge11" class="edge">
<title>celery&#45;&gt;redis</title>
<path fill="none" stroke="black" d="M237.25,-310.09C237.25,-310.09 237.25,-211.49 237.25,-211.49"/>
<polygon fill="black" stroke="black" points="240.75,-211.49 237.25,-201.49 233.75,-211.49 240.75,-211.49"/>
<text xml:space="preserve" text-anchor="middle" x="314" y="-259.16" font-family="Helvetica,sans-Serif" font-size="10.00">task queue</text>
</g>
<!-- celery&#45;&gt;minio -->
<g id="edge13" class="edge">
<title>celery&#45;&gt;minio</title>
<path fill="none" stroke="black" d="M349.62,-310.09C349.62,-310.09 349.62,-200.39 349.62,-200.39"/>
<polygon fill="black" stroke="black" points="353.13,-200.39 349.63,-190.39 346.13,-200.39 353.13,-200.39"/>
<text xml:space="preserve" text-anchor="middle" x="441.5" y="-271.91" font-family="Helvetica,sans-Serif" font-size="10.00">S3 API</text>
<text xml:space="preserve" text-anchor="middle" x="441.5" y="-259.16" font-family="Helvetica,sans-Serif" font-size="10.00">download input</text>
<text xml:space="preserve" text-anchor="middle" x="441.5" y="-246.41" font-family="Helvetica,sans-Serif" font-size="10.00">upload output</text>
</g>
<!-- bucket_in -->
<g id="node11" class="node">
<title>bucket_in</title>
<polygon fill="none" stroke="black" points="434.75,-58.5 327.25,-58.5 327.25,-16 440.75,-16 440.75,-52.5 434.75,-58.5"/>
<polyline fill="none" stroke="black" points="434.75,-58.5 434.75,-52.5"/>
<polyline fill="none" stroke="black" points="440.75,-52.5 434.75,-52.5"/>
<text xml:space="preserve" text-anchor="middle" x="384" y="-41.2" font-family="Helvetica,sans-Serif" font-size="14.00">mpr&#45;media&#45;in/</text>
<text xml:space="preserve" text-anchor="middle" x="384" y="-23.95" font-family="Helvetica,sans-Serif" font-size="14.00">input videos</text>
</g>
<!-- minio&#45;&gt;bucket_in -->
<g id="edge14" class="edge">
<title>minio&#45;&gt;bucket_in</title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M392.19,-128.27C392.19,-106.66 392.19,-78.11 392.19,-58.79"/>
</g>
<!-- bucket_out -->
<g id="node12" class="node">
<title>bucket_out</title>
<polygon fill="none" stroke="black" points="637.12,-58.5 498.88,-58.5 498.88,-16 643.12,-16 643.12,-52.5 637.12,-58.5"/>
<polyline fill="none" stroke="black" points="637.12,-58.5 637.12,-52.5"/>
<polyline fill="none" stroke="black" points="643.12,-52.5 637.12,-52.5"/>
<text xml:space="preserve" text-anchor="middle" x="571" y="-41.2" font-family="Helvetica,sans-Serif" font-size="14.00">mpr&#45;media&#45;out/</text>
<text xml:space="preserve" text-anchor="middle" x="571" y="-23.95" font-family="Helvetica,sans-Serif" font-size="14.00">transcoded output</text>
</g>
<!-- minio&#45;&gt;bucket_out -->
<g id="edge15" class="edge">
<title>minio&#45;&gt;bucket_out</title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M463.56,-128.21C463.56,-92.2 463.56,-37 463.56,-37 463.56,-37 479.15,-37 498.44,-37"/>
</g>
</g>
</svg>