File size: 8,171 Bytes
3819da1
 
 
 
 
 
 
 
 
 
 
 
6d2331f
3819da1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
		/>

		<script>
			window.__gradio_mode__ = "app";
            window.gradio_config = {"version": "3.0.17", "mode": "blocks", "dev_mode": false, "components": [{"id": 1, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 2, "type": "markdown", "props": {"value": "<h1><center>CloixAi Web3s </center></h1>", "name": "markdown", "visible": true, "style": {}}}, {"id": 3, "type": "markdown", "props": {"value": "<p>CloixAi Art Kararlı Sürüm Aktif Sürüm 1.1!</p>\n", "name": "markdown", "visible": true, "style": {}}}, {"id": 4, "type": "group", "props": {"type": "group", "visible": true, "style": {}}}, {"id": 5, "type": "box", "props": {"type": "box", "visible": true, "style": {}}}, {"id": 6, "type": "row", "props": {"type": "row", "visible": true, "style": {"equal_height": true, "mobile_collapse": false}}}, {"id": 7, "type": "textbox", "props": {"lines": 1, "max_lines": 1, "value": "", "label": "Enter your prompt", "show_label": false, "name": "textbox", "visible": true, "elem_id": "prompt", "style": {"container": false}}}, {"id": 8, "type": "button", "props": {"value": "Run", "variant": "primary", "name": "button", "visible": true, "style": {}}}, {"id": 9, "type": "gallery", "props": {"label": "Generated images", "show_label": false, "name": "gallery", "visible": true, "elem_id": "gallery", "style": {"grid": [3], "height": "auto"}}}, {"id": 10, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 11, "type": "button", "props": {"value": "Screenshot", "variant": "secondary", "name": "button", "visible": true, "elem_id": "screenshot", "style": {"full_width": true}}}, {"id": 12, "type": "markdown", "props": {"value": "<details>\n<summary>Bilgilendirme</summary>\n<p style='line-height: normal; font-size: small'>\n Bu araç CloixAi Dalle Mini sistemi ile çalışan Kararlı sürümüdür 1.1 sürümündedir ve geliştirilmektedir. <a href=\"https://hostingtelekom.com\" target=\"_blank\">CloixAi By Hosting Telekom </a>.\n</p>\n</details>", "name": "markdown", "visible": true, "style": {}}}, {"id": 13, "type": "markdown", "props": {"value": "<hr />\n<p style='text-align: center'>\nCode by <a href=\"https://HostingTelekom.com\" target=\"_blank\">Hosting Telekom</a> et al. 2021-2022\n<br/>\n<a href=\"https://discord.gg/9dBQakRMeG" target=\"_blank\">Discord</a> | <a href=\"https://cloix.com.tr" target=\"_blank\">Main Page</a>\n<p style='text-align: center'>Powered by Hosting Telekom <a href=\"https://code.hostingtelekom.com" target=\"_blank\">Code Cloud</a>\n</p>", "name": "markdown", "visible": true, "style": {}}}], "theme": "default", "css": ".container { max-width: 800px; margin: auto; }", "enable_queue": false, "layout": {"id": 0, "children": [{"id": 1, "children": [{"id": 2}, {"id": 3}, {"id": 4, "children": [{"id": 5, "children": [{"id": 6, "children": [{"id": 7}, {"id": 8}]}]}, {"id": 9}]}]}, {"id": 10, "children": [{"id": 11}, {"id": 12}, {"id": 13}]}]}, "dependencies": [{"targets": [8], "trigger": "click", "inputs": [7], "outputs": [9], "backend_fn": false, "js": "\n        async (text) => {\n            try {\n                document.querySelector('#screenshot').style.display = 'none';\n                response = await fetch('https://bf.dallemini.ai/generate', {\n                    method: 'POST',\n                    headers: {\n                        'Accept': 'application/json',\n                        'Content-Type': 'application/json'\n                    },\n                    body: JSON.stringify({\n                        prompt: text\n                    })\n                });\n                response = await response.json()\n                let imgs = response.images.map(r => \"data:image/png;base64,\" + r)\n                document.querySelector('#screenshot').style.display = 'block';\n                return imgs\n            } catch (e) {\n                alert(\"Too much traffic, please try again.\")\n                IMG = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAOVBMVEXg4OB1dXXX19fd3d2EhIR9fX14eHjJycm2trbb29uurq6goKCZmZmIiIiBgYHNzc2np6e8vLySkpKXK8HrAAABuUlEQVR4nO3Z0bKCIBCAYQNFVCzr/R/2nHU6k8KpJi6wZf7vLu1id9gFhKYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAb249h7pzr5jD29uhospnlfNo4L+boiLKYyZ0iblKYiu/iNER3PTquD9npPgbB98Za0/twH59JVasMtzXo1m+iHny7PrwpysSuebgxCtmOTlkma121l/TFZR2UqXxEebxEO/87QZlZ3inpeCPzVftkojUyJp2OWVgKy23qSsbg8evitBSXkUjHzYN9Is0oeWoYkkUKazsxRYlYKa6ldFSfs7K/8tsnUSLrXHAuG1SOXpp5t1LEiQxSe33ZqDJIC4TdkziRJkRN9J1CXFlpIj7J9RvNSd0kiUj1zSVjyiKr4X5yTRIx0kYlY8oinbzfFSaJWFlJSsaUpZpEqimttNkTOpo9nX4TOqbfdEFM6FgQpW7c8OofSrYo1Wwaq9nG1/NhVc2nbj2HD821kuOgeg7o3hyZBj1Hpo9D7M3K+HeIrSmPeq4Vfl3ruOhpnly9vdyEfa1KLkPF7nr66GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjcD13rCcC3ILx/AAAAAElFTkSuQmCC\"\n                document.querySelector('#screenshot').style.display = 'block';\n                return Array(9).fill(IMG)\n            }\n        }\n        ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}, {"targets": [11], "trigger": "click", "inputs": [], "outputs": [], "backend_fn": false, "js": "\n            () => {\n                document.getElementById(3).style.display = 'none';\n                const captureElement = document.getElementById(1)\n                let bg_color = getComputedStyle(document.querySelector(\"#root .container\"))[\"background-color\"]\n                captureElement.style.backgroundColor = bg_color;     \n                html2canvas(captureElement)\n                .then(canvas => {\n                    canvas.style.display = 'none'\n                    document.body.appendChild(canvas)\n                    return canvas\n                })\n                .then(canvas => {\n                    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')\n                    const a = document.createElement('a')\n                    const date = new Date()\n                    const filename = `dallemini_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}_${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}.png`\n                    a.setAttribute('download', filename)\n                    a.setAttribute('href', image)\n                    a.click()\n                    canvas.remove()\n                    document.getElementById(3).style.display = 'block';\n                })\n            }\n        ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}]};
        </script>

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link
			rel="preconnect"
			href="https://fonts.gstatic.com"
			crossorigin="anonymous"
		/>
		<link
			href="https://fonts.googleapis.com/css?family=Source Sans Pro"
			rel="stylesheet"
		/>
		<link
			href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
			rel="stylesheet"
		/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
        <script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"></script>
        <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css">
        <style>
            #screenshot {
                display: none;
            }
            .container > div > div {
                padding: 0.5rem;                
            }
            footer a {
                color: rgb(156 163 175) !important;
            }
            footer img {
                display: none !important;
            }
        </style>
	</head>

	<body
		style="
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		"
	>
		<div
			id="root"
			style="display: flex; flex-direction: column; flex-grow: 1"
		></div>
        <script src="html2canvas.js"></script>
	</body>
</html>