Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet"> | |
| <title>Custom LLM</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| color: #212529; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| padding: 1rem; | |
| } | |
| h1 { | |
| text-align: center; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| h1 span { | |
| font-size: 0.8rem; | |
| /* Gray color */ | |
| font-weight: 400; | |
| position: absolute; | |
| top: -1rem; | |
| right: 0; | |
| color: #6c757d; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| margin-bottom: 2rem; | |
| } | |
| label { | |
| font-size: 1rem; | |
| font-weight: 400; | |
| margin-bottom: 0.5rem; | |
| } | |
| .container { | |
| max-width: 800px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 1rem; | |
| } | |
| input { | |
| font-size: 1rem; | |
| padding: 0.5rem; | |
| border: 1px solid #ced4da; | |
| border-radius: 0.25rem; | |
| margin-bottom: 1rem; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: #fff; | |
| background-color: #007bff; | |
| border: none; | |
| border-radius: 0.25rem; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| text-align: center; | |
| } | |
| p { | |
| font-size: 1rem; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| .social-icons { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .social-icons a { | |
| margin: 0 0.5rem; | |
| } | |
| .social-icons svg { | |
| transition: opacity 0.3s; | |
| } | |
| .social-icons svg:hover { | |
| opacity: 0.7; | |
| } | |
| /* SPINNER */ | |
| .spinner { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| z-index: 9999; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .loader { | |
| border: 5px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 5px solid #3498db; | |
| width: 50px; | |
| height: 50px; | |
| animation: spin 2s linear infinite; | |
| } | |
| #spinner-text { | |
| margin-top: 1rem; | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| text-align: center; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--<div class="social-icons"> | |
| <a href="https://www.linkedin.com/in/martin-karlsson/" target="_blank"> | |
| <svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <g id="SVGRepo_bgCarrier" stroke-width="0"></g> | |
| <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> | |
| <g id="SVGRepo_iconCarrier"> | |
| <rect x="2" y="2" width="28" height="28" rx="14" fill="#1275B1"></rect> | |
| <path | |
| d="M12.6186 9.69215C12.6186 10.6267 11.8085 11.3843 10.8093 11.3843C9.81004 11.3843 9 10.6267 9 9.69215C9 8.7576 9.81004 8 10.8093 8C11.8085 8 12.6186 8.7576 12.6186 9.69215Z" | |
| fill="white"></path> | |
| <path d="M9.24742 12.6281H12.3402V22H9.24742V12.6281Z" fill="white"></path> | |
| <path | |
| d="M17.3196 12.6281H14.2268V22H17.3196C17.3196 22 17.3196 19.0496 17.3196 17.2049C17.3196 16.0976 17.6977 14.9855 19.2062 14.9855C20.911 14.9855 20.9008 16.4345 20.8928 17.5571C20.8824 19.0244 20.9072 20.5219 20.9072 22H24V17.0537C23.9738 13.8954 23.1508 12.4401 20.4433 12.4401C18.8354 12.4401 17.8387 13.1701 17.3196 13.8305V12.6281Z" | |
| fill="white"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| <a href="https://medium.com/@martinkarlsson.io" target="_blank"> | |
| <svg fill="#000000" width="40px" height="40px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg"> | |
| <g id="SVGRepo_bgCarrier" stroke-width="0"></g> | |
| <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> | |
| <g id="SVGRepo_iconCarrier"> | |
| <path | |
| d="M136,128c0,37.49512-28.71,68-64,68S8,165.49514,8,128,36.71,60,72,60,136,90.5049,136,128ZM240,64a8.00039,8.00039,0,0,0-8,8V184a8,8,0,0,0,16,0V72A8.00039,8.00039,0,0,0,240,64Zm-56,0c-5.68262,0-16.39941,2.76074-24.32373,21.251C154.72607,96.8008,152,111.98342,152,128s2.72607,31.19922,7.67627,42.749C167.60059,189.23928,178.31738,192,184,192s16.39941-2.76074,24.32373-21.251C213.27393,159.19924,216,144.01662,216,128s-2.72607-31.19922-7.67627-42.749C200.39941,66.76076,189.68262,64,184,64Z"> | |
| </path> | |
| </g> | |
| </svg> | |
| </a> | |
| <a href="https://github.com/martinkarlssonio" target="_blank"> | |
| <svg width="40px" height="40px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"> | |
| <g id="SVGRepo_bgCarrier" stroke-width="0"></g> | |
| <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> | |
| <g id="SVGRepo_iconCarrier"> | |
| <title>github [#142]</title> | |
| <desc>Created with Sketch.</desc> | |
| <defs> </defs> | |
| <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
| <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000"> | |
| <g id="icons" transform="translate(56.000000, 160.000000)"> | |
| <path | |
| d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" | |
| id="github-[#142]"> </path> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| </a> | |
| <a href="https://www.buymeacoffee.com/martinkarlsson" target="_blank"> | |
| <svg fill="#000000" width="40px" height="40px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"> | |
| <g id="SVGRepo_bgCarrier" stroke-width="0"></g> | |
| <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> | |
| <g id="SVGRepo_iconCarrier"> | |
| <path | |
| d="m20.216 6.415-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 0 0-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 0 0-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 0 1-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 0 1 3.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 0 1-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 0 1-4.743.295 37.059 37.059 0 0 1-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0 0 11.343.376.483.483 0 0 1 .535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 0 1 .39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 0 1-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 0 1-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 0 0-1.322-.238c-.826 0-1.491.284-2.26.613z"> | |
| </path> | |
| </g> | |
| </svg> | |
| </a> | |
| </div> | |
| <h1> | |
| Customized LLM | |
| <span>By : Martin Karlsson</span><br> | |
| </h1> <br> --> | |
| <!-- SPINNER --> | |
| <div id="spinner" class="spinner"> | |
| <div class="loader"></div> | |
| </div> | |
| <div class="container"> | |
| <!--<span>Loads a directory with various documentation for two different fictional technical products (the robots named 'Oksi' and 'Raska') by a | |
| fictional company.<br> This LLM can anwser your questions about these products, based on the loaded | |
| documentation.</span><br><br> --> | |
| <form method="post"> | |
| {% if not show_question_input %} | |
| <label for="openApiKey">OpenAI API Key:</label> | |
| <input type="password" id="openApiKey" name="openApiKey" required autocomplete="off"> | |
| <!-- <button type="submit">Submit Key</button> --> | |
| <button id="submit-btn">Submit Key</button> | |
| {% else %} | |
| <br> | |
| <label for="query">What is your question?</label> | |
| <input type="text" id="query" name="query" required autocomplete="off"> | |
| <!-- <button type="submit">Ask question!</button> --> | |
| <button id="submit-btn">Ask question!</button> | |
| {% endif %} | |
| </form> | |
| {% if error_message %} | |
| <p>{{ error_message }}</p> | |
| {% endif %} | |
| <p>{{ output }}</p> | |
| </div> | |
| <!-- SPINNER --> | |
| <script> | |
| document.getElementById("submit-btn").addEventListener("click", function() { | |
| const spinner = document.getElementById("spinner"); | |
| spinner.style.display = "flex"; | |
| API_CALL_FUNCTION().then(() => { | |
| spinner.style.display = "none"; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |