Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Gyula Klima · A screening: Can a machine think?</title> | |
| <meta name="description" content="A screening with Gyula Klima on whether a machine can think, from Llull's wheel to Aquinas to Searle's Chinese room. Then ask his replica anything."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://zwaneria-klima-machine.static.hf.space"> | |
| <meta property="og:site_name" content="Shryn"> | |
| <meta property="og:title" content="Can a machine think? A screening with Gyula Klima"> | |
| <meta property="og:description" content="From Llull's wheel to Aquinas to Searle's Chinese room, the medieval case for why thinking may be more than moving symbols. Then ask his replica anything."> | |
| <meta property="og:image" content="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/klima/machine/og.jpg"> | |
| <meta property="og:image:width" content="1200"> | |
| <meta property="og:image:height" content="630"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="Can a machine think? A screening with Gyula Klima"> | |
| <meta name="twitter:description" content="The medieval case for why thinking may be more than moving symbols. Then ask his replica anything."> | |
| <meta name="twitter:image" content="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/klima/machine/og.jpg"> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root{--bg:#faf8f3;--card:#fffdf8;--ink:#1a2540;--soft:#4a5269;--gold:#b8893a;--cta:#C5A55A;--mute:#8a8576;--border:#e8e3d4;--dark:#171512} | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| html,body{height:100%} | |
| body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden} | |
| .banner{position:relative;flex:none;height:clamp(120px,16vh,168px);overflow:hidden;background:radial-gradient(120% 160% at 18% 30%,#241f18 0%,#171512 60%,#100d0a 100%)} | |
| .banner .inner{position:absolute;inset:0;z-index:2;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1rem,3vw,2rem)} | |
| .banner .mk{font-family:'Cormorant',serif;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cta);font-size:.76rem;margin-bottom:.3rem} | |
| .banner .ttl{font-family:'Cormorant',serif;font-weight:300;color:#fff;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.02} | |
| .banner .sub{font-family:'Cormorant Garamond',serif;font-style:italic;color:rgba(255,255,255,.74);font-size:clamp(.95rem,2vw,1.15rem);margin-top:.2rem} | |
| .banner .switch{position:absolute;top:.9rem;right:clamp(1rem,3vw,2rem);z-index:3;display:flex;align-items:center;gap:.5rem;font-size:.68rem;color:rgba(255,255,255,.66)} | |
| .banner .switch .lbl{text-transform:uppercase;letter-spacing:.14em;font-size:.58rem;color:rgba(255,255,255,.5)} | |
| .banner .switch a{text-decoration:none;color:#f0e2c4;font-weight:600;background:rgba(20,16,10,.5);border:1px solid rgba(230,205,150,.55);border-radius:40px;padding:.4rem .85rem;white-space:nowrap} | |
| .banner .switch a:hover{background:rgba(184,137,58,.42)} | |
| @media(max-width:600px){.banner .switch .lbl{display:none}} | |
| .grid{flex:1;min-height:0;width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(340px,.84fr);gap:1.4rem;padding:1.2rem clamp(1rem,3vw,2rem)} | |
| .stage{min-width:0;min-height:0;display:flex;flex-direction:column} | |
| .tabs{flex:none;display:flex;gap:.4rem;margin-bottom:.7rem} | |
| .tab{font-size:.74rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);background:none;border:1px solid var(--border);border-radius:6px;padding:.45rem .9rem;cursor:pointer;transition:all .2s} | |
| .tab:hover{color:var(--soft);border-color:var(--gold)} | |
| .tab.active{color:#fff;background:var(--ink);border-color:var(--ink)} | |
| .screen{flex:1;min-height:0;position:relative;width:100%;background:#000;border-radius:8px;overflow:hidden;border:1px solid rgba(184,137,58,.4);box-shadow:0 18px 46px rgba(26,37,64,.22)} | |
| .pane{position:absolute;inset:0;display:none;align-items:center;justify-content:center} | |
| .pane.active{display:flex} | |
| .pane video{width:100%;height:100%;object-fit:contain;background:#000} | |
| .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(0,0,0,.32));transition:background .3s;z-index:8} | |
| .play:hover{background:radial-gradient(ellipse at center,rgba(0,0,0,0),rgba(0,0,0,.22))} | |
| .play .c{width:64px;height:64px;border-radius:50%;background:rgba(20,16,10,.45);border:1px solid rgba(230,205,150,.85);display:flex;align-items:center;justify-content:center;transition:transform .25s} | |
| .play:hover .c{transform:scale(1.06)} | |
| .play .t{width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #f0e2c4;margin-left:4px} | |
| .beat{position:absolute;left:0;right:0;bottom:0;z-index:7;display:none;padding:2.6rem 1.9rem 1.5rem;background:linear-gradient(to top,rgba(9,7,5,.95) 0%,rgba(9,7,5,.82) 42%,rgba(9,7,5,.3) 82%,transparent 100%)} | |
| .beat.on{display:block} | |
| .beat .kicker{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cta);margin-bottom:.5rem} | |
| .beat .bline{font-family:'Cormorant',serif;font-weight:300;font-style:italic;color:#f6efe1;font-size:clamp(1.15rem,2.35vw,1.6rem);line-height:1.4;max-width:46ch;text-shadow:0 2px 12px rgba(0,0,0,.65)} | |
| .cap{flex:none;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:var(--soft);margin-top:.7rem;min-height:1.3em} | |
| .qa{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(26,37,64,.1);overflow:hidden} | |
| .qa-head{flex:none;display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border)} | |
| .qa-head img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:top center;background:#eee;border:1px solid var(--border)} | |
| .qa-head .qn{font-family:'Cormorant',serif;font-size:1.35rem;line-height:1.1;color:var(--ink)} | |
| .qa-head .qr{font-size:.72rem;color:var(--mute);margin-top:.15rem} | |
| .qa-body{flex:1;min-height:0;overflow-y:auto;padding:1.05rem;display:flex;flex-direction:column;gap:.85rem} | |
| .qa-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--soft)} | |
| .chips{display:flex;flex-direction:column;gap:.5rem} | |
| .chip{font-size:.82rem;color:var(--gold);background:rgba(184,137,58,.07);border:1px solid var(--border);border-radius:8px;padding:.55rem .8rem;cursor:pointer;transition:all .2s;text-align:left;line-height:1.35} | |
| .chip:hover{background:rgba(184,137,58,.14);border-color:rgba(184,137,58,.5);color:#8a6626} | |
| .chip:disabled{opacity:.4;cursor:default} | |
| .msg{font-family:Georgia,serif;line-height:1.65;font-size:.92rem} | |
| .msg .tag{display:block;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.25rem;font-family:'Inter',sans-serif} | |
| .msg.user{color:var(--ink)}.msg.user .tag{color:var(--mute)} | |
| .msg.klima{color:var(--soft)}.msg.klima .tag{color:var(--gold)} | |
| .msg.think{color:var(--mute);font-style:italic} | |
| .msg.notice{color:var(--soft);font-style:italic;background:rgba(184,137,58,.07);padding:.8rem .95rem;border-radius:8px;border:1px solid var(--border);font-family:'Cormorant Garamond',serif;font-size:1rem} | |
| .qa-foot{flex:none;border-top:1px solid var(--border);padding:.8rem 1.05rem;background:var(--card)} | |
| .form{display:flex;gap:.5rem} | |
| .input{flex:1;padding:.7rem .85rem;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:#fff;color:var(--ink);outline:none;font-family:'Inter',sans-serif} | |
| .input:focus{border-color:var(--gold)} | |
| .send{padding:.7rem 1.15rem;background:var(--cta);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:'Inter',sans-serif} | |
| .send:hover{filter:brightness(1.06)}.send:disabled{opacity:.4;cursor:default} | |
| .row2{display:flex;align-items:center;justify-content:space-between;margin-top:.55rem} | |
| .vtoggle{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:none;border:1px solid var(--border);border-radius:4px;padding:.28rem .6rem;cursor:pointer;font-family:'Inter',sans-serif} | |
| .vtoggle.off{color:var(--border)} | |
| .disc{font-size:.62rem;color:var(--mute);opacity:.8;line-height:1.4;text-align:right;max-width:64%} | |
| @media(max-width:920px){body{overflow:auto}.grid{grid-template-columns:1fr;gap:1.1rem}.stage{min-height:auto}.screen{flex:none;aspect-ratio:16/9}.qa{min-height:auto}.qa-body{max-height:46vh}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="banner"> | |
| <div class="inner"><div class="mk">Shryn</div><div class="ttl">A screening with Gyula Klima</div><div class="sub">Can a machine think? The answer medieval philosophers reached first.</div></div> | |
| </div> | |
| <main class="grid"> | |
| <section class="stage"> | |
| <div class="tabs"> | |
| <button class="tab active" id="tabWelcome">Klima's welcome</button> | |
| <button class="tab" id="tabFilm">The screening</button> | |
| </div> | |
| <div class="screen"> | |
| <div class="pane active" id="paneWelcome"> | |
| <video id="welcomevid" playsinline preload="metadata" poster="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/gyula-klima/stage/portrait.png" src="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/gyula-klima/stage/intro_v1.mp4"></video> | |
| <div class="play" id="playWelcome"><div class="c"><div class="t"></div></div></div> | |
| </div> | |
| <div class="pane" id="paneFilm"> | |
| <video id="film" playsinline preload="none" poster="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/klima/machine/poster.jpg" src="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/klima/machine/machine.mp4?v=2"></video> | |
| <div class="beat" id="beat"><div class="kicker">Gyula Klima</div><div class="bline" id="beatLine"></div></div> | |
| <div class="play" id="playFilm"><div class="c"><div class="t"></div></div></div> | |
| </div> | |
| </div> | |
| <p class="cap" id="cap">Start here. A short welcome from Klima, then the screening begins on its own.</p> | |
| </section> | |
| <aside class="qa"> | |
| <div class="qa-head"> | |
| <img src="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/gyula-klima/stage/portrait.png" alt="Gyula Klima"> | |
| <div><div class="qn">Ask Klima</div><div class="qr">Professor of Philosophy, Fordham University</div></div> | |
| </div> | |
| <div class="qa-body" id="qaBody"> | |
| <div class="qa-intro">Watch on the left, then talk. Push back, test him, ask what you actually want to know. He answers in his own words.</div> | |
| <div class="chips" id="chips"> | |
| <button class="chip">Can an AI like ChatGPT actually understand anything?</button> | |
| <button class="chip">Why can't a machine grasp a universal like triangularity?</button> | |
| <button class="chip">Is Searle's Chinese Room still a good argument today?</button> | |
| <button class="chip">What would you say to someone who thinks AI is conscious?</button> | |
| </div> | |
| </div> | |
| <div class="qa-foot"> | |
| <form class="form" id="form"><input class="input" id="input" type="text" placeholder="Ask Klima a question..." autocomplete="off"><button class="send" id="send" type="submit">Ask</button></form> | |
| <div class="row2"><button class="vtoggle" id="vtoggle" type="button">Voice on</button><div class="disc">An AI voice of Professor Gyula Klima, built with his participation. Not Professor Klima himself.</div></div> | |
| </div> | |
| </aside> | |
| </main> | |
| <script> | |
| (function(){ | |
| var welcomevid=document.getElementById("welcomevid"),film=document.getElementById("film"); | |
| var paneWelcome=document.getElementById("paneWelcome"),paneFilm=document.getElementById("paneFilm"); | |
| var tabWelcome=document.getElementById("tabWelcome"),tabFilm=document.getElementById("tabFilm"); | |
| var playWelcome=document.getElementById("playWelcome"),playFilm=document.getElementById("playFilm"); | |
| var cap=document.getElementById("cap"),beat=document.getElementById("beat"),beatLine=document.getElementById("beatLine"); | |
| var CLOSE_AUDIO="https://cmoamdistlpbahcryjda.supabase.co/storage/v1/object/public/classroom-assets/klima/machine/closing2.mp3",CLOSE_TEXT="If you would like to ask me anything about what we have discussed, just type your question in the box to the right, and I will answer."; | |
| var beatAudio=document.createElement("audio"),closing=false,engaged=false; | |
| function show(view){var w=view==="welcome";paneWelcome.classList.toggle("active",w);paneFilm.classList.toggle("active",!w);tabWelcome.classList.toggle("active",w);tabFilm.classList.toggle("active",!w); | |
| if(w){beat.classList.remove("on");try{film.pause();}catch(e){}cap.textContent="Start here. A short welcome from Klima, then the screening begins on its own.";} | |
| else{try{welcomevid.pause();}catch(e){}cap.textContent="Sound on is best. Captions are burned in if not.";}} | |
| tabWelcome.addEventListener("click",function(){show("welcome");}); | |
| tabFilm.addEventListener("click",function(){show("film");}); | |
| playWelcome.addEventListener("click",function(){playWelcome.style.display="none";welcomevid.controls=true;welcomevid.play();}); | |
| welcomevid.addEventListener("ended",function(){welcomevid.controls=false;playWelcome.style.display="flex";show("film");film.controls=true;if(engaged){playFilm.style.display="flex";return;}playFilm.style.display="none";var p=film.play();if(p&&p.catch)p.catch(function(){playFilm.style.display="flex";});}); | |
| playFilm.addEventListener("click",function(){playFilm.style.display="none";film.controls=true;film.play();}); | |
| film.addEventListener("ended",function(){fireClose();}); | |
| function fireClose(){closing=true;try{film.pause();}catch(e){}film.controls=false;beatLine.textContent=CLOSE_TEXT;beat.classList.add("on");beatAudio.src=CLOSE_AUDIO;beatAudio.play().catch(function(){});} | |
| function finishClose(){closing=false;beat.classList.remove("on");film.controls=true;cap.textContent="Now, ask him anything. His answers here are his own.";try{input.focus();}catch(e){}} | |
| beatAudio.addEventListener("ended",function(){if(closing)finishClose();}); | |
| var CHAT="https://cmoamdistlpbahcryjda.supabase.co/functions/v1/klima-chat"; | |
| var qaBody=document.getElementById("qaBody"),input=document.getElementById("input"),send=document.getElementById("send"),form=document.getElementById("form"),chips=document.getElementById("chips"),vtoggle=document.getElementById("vtoggle"); | |
| var history=[],busy=false,voiceOn=true,audioEl=document.createElement("audio"); | |
| vtoggle.addEventListener("click",function(){voiceOn=!voiceOn;vtoggle.textContent=voiceOn?"Voice on":"Voice off";vtoggle.classList.toggle("off",!voiceOn);if(!voiceOn){try{audioEl.pause();}catch(e){}}}); | |
| function add(role,text,cls){var d=document.createElement("div");d.className="msg "+(cls||role);var t=document.createElement("span");t.className="tag";t.textContent=role==="user"?"You":"Gyula Klima";d.appendChild(t);var p=document.createElement("span");p.textContent=text;d.appendChild(p);qaBody.appendChild(d);qaBody.scrollTop=qaBody.scrollHeight;return d;} | |
| function stripMd(s){return (s||"").replace(/\*\*([^*]+)\*\*/g,"$1").replace(/\*([^*]+)\*/g,"$1").replace(/`([^`]+)`/g,"$1").replace(/^#{1,6}\s+/gm,"").replace(/\*/g,"").trim();} | |
| function playAudio(b64){if(!voiceOn||!b64)return;try{var raw=atob(b64),a=new Uint8Array(raw.length);for(var i=0;i<raw.length;i++)a[i]=raw.charCodeAt(i);audioEl.src=URL.createObjectURL(new Blob([a],{type:"audio/mpeg"}));audioEl.play().catch(function(){});}catch(e){}} | |
| function hushKlima(){engaged=true;try{welcomevid.pause();}catch(e){}try{film.pause();}catch(e){}try{beatAudio.pause();}catch(e){}try{audioEl.pause();audioEl.currentTime=0;}catch(e){}if(beat.classList.contains("on")){closing=false;beat.classList.remove("on");film.controls=true;cap.textContent="Now, ask him anything. His answers here are his own.";}} | |
| async function sendMessage(msg){ | |
| if(busy||!msg.trim())return;busy=true;input.disabled=true;send.disabled=true;add("user",msg);hushKlima(); | |
| var think=add("klima","Thinking...","think"); | |
| try{ | |
| var res=await fetch(CHAT,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:msg,history:history,conversation_history:history,voice:voiceOn})}); | |
| var json=await res.json();var d=json.data||[];var text=stripMd(typeof d[0]==="string"?d[0]:""); | |
| if(!text)throw new Error("empty"); | |
| think.remove();add("klima",text);if(Array.isArray(d[1]))history=d[1];playAudio(json.audioBase64); | |
| }catch(err){think.textContent="Something went wrong reaching Klima. Please try again in a moment.";think.className="msg notice";} | |
| busy=false;input.disabled=false;send.disabled=false;input.focus(); | |
| } | |
| form.addEventListener("submit",function(e){e.preventDefault();var v=input.value.trim();if(v){input.value="";sendMessage(v);}}); | |
| Array.prototype.forEach.call(chips.querySelectorAll(".chip"),function(c){c.addEventListener("click",function(){sendMessage(c.textContent.trim());});}); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |