2024-08-12 scittle | Clojure Slack Archive

scittle

Chris McCormick 2024-08-12T10:20:11.711979Z

I got this working and was able to use Claude to generate an interactive compound interest calculator using Scittle. You can https://claude.site/artifacts/8fa18ead-e75f-43df-acfe-03ac8ab7cf40. It made a silly mistake (`Math/pow` instead of js/Math.pow) but once it was corrected the calculator worked! I'm on the road but I'll post something about this soon. I'll post my prompt in the thread below in case anybody wants to experiment. I think it could be improved a lot with more examples in the prompt (like using js/Math, react libraries, applied-science.js-interop, promesa, etc.)

Chris McCormick 2024-08-12T10:20:52.949609Z

Scittle is a ClojureScript interpreter which runs entirely in the browser. It supports React via Reagent. I've attached an example of it's usage below.

Can you please create a simple compound interest calculator using Scittle?


<html>
  <head>
    <title>Scittle basic example</title>
    <link rel="stylesheet" href="">
    <script src="" type="application/javascript"></script>
    <script src=""></script>
    <script src=""></script>
    <script src="" type="application/javascript"></script>
    <script type="application/x-scittle">
      (require
        '[reagent.core :as r]
        '[reagent.dom :as rdom])
      (def state (r/atom {:clicks 0}))
      (defn my-component []
       [:div
        [:p "Clicks: " (:clicks @state)]
        [:p [:button {:on-click #(swap! state update :clicks inc)}
             "Click me!"]]])
      (rdom/render [my-component] (.getElementById js/document "app"))
    </script>
    <style>
      body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
      input { margin: 5px 0; padding: 5px; }
      h1 { color: #333; }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Chris McCormick 2024-08-12T10:21:45.539609Z

Follow-up prompts:

Error: Message:  Could not resolve symbol: Math/pow
Did you mean js/Math.pow instead?

And:

Can you add a CSS based loading spinner as the initial content for #app so that it displays until the app is mounted?

borkdude 2024-08-12T10:22:14.477079Z

Hmm, Math/pow should work, I could fix that if it doesn't yet

Chris McCormick 2024-08-12T10:22:50.452449Z

Oh really? I didn't realize that namespace was available like that.

borkdude 2024-08-12T10:23:03.111359Z

yeah, (js/console.log Math/pow) it works here: https://babashka.org/scittle/codemirror.html

borkdude 2024-08-12T10:23:19.423949Z

it's the only globally defined JS thing I think, a bit of an exception in CLJS

👍 1

borkdude 2024-08-12T10:24:46.076699Z

It's pretty cool that AI was able to generate this

Chris McCormick 2024-08-12T10:26:43.964999Z

Here's the generated code that threw the error.

(require
        '[reagent.core :as r]
        '[reagent.dom :as rdom])

      (def state (r/atom {:principal 1000
                          :rate 5
                          :time 5
                          :compound-frequency 12}))

      (defn calculate-compound-interest []
        (let [{:keys [principal rate time compound-frequency]} @state
              r (/ rate 100)
              n compound-frequency
              t time]
          (* principal (Math/pow (+ 1 (/ r n)) (* n t)))))

      (defn input-field [label key type]
        [:div
         [:label label]
         [:input {:type type
                  :value (get @state key)
                  :on-change #(swap! state assoc key (-> % .-target .-value js/parseFloat))}]])

      (defn compound-interest-calculator []
        [:div
         [:h1 "Compound Interest Calculator"]
         [input-field "Principal Amount: $" :principal "number"]
         [input-field "Annual Interest Rate (%): " :rate "number"]
         [input-field "Time (years): " :time "number"]
         [input-field "Compound Frequency (per year): " :compound-frequency "number"]
         [:h2 "Result:"]
         [:p "Future Value: $" (.toFixed (calculate-compound-interest) 2)]])

      (rdom/render [compound-interest-calculator] (.getElementById js/document "app"))

I'm confused about why it works on the http://babashka.org version but throws an error on the npm/cdnjs version.

borkdude 2024-08-12T10:30:35.058529Z

Perhaps you're using an old version?

borkdude 2024-08-12T10:30:48.010999Z

what version of scittle are you using

Chris McCormick 2024-08-12T10:35:14.352329Z

Sorry, on the train and internet keeps dropping.

Chris McCormick 2024-08-12T10:35:45.989079Z

0.2.8/scittle.js

borkdude 2024-08-12T10:35:59.673309Z

scittle is at 0.6.17 now

Chris McCormick 2024-08-12T10:37:26.489259Z

facepalm somehow I must have submitted an old version to cdnjs. I'll fix it.

borkdude 2024-08-12T10:39:17.293179Z

This seems to work: https://cdnjs.cloudflare.com/ajax/libs/scittle/0.6.17/scittle.js but your app above uses 0.2.8 in the url

borkdude 2024-08-12T10:41:29.758689Z

yes, that's just it. this works:

<html>
  <head>
    <script src="">
      </script>
      <script type="application/x-scittle">
        (js/console.log Math/pow)
      </script>
  </head>
  
</html>

Chris McCormick 2024-08-12T10:41:57.729529Z

Ok yes it seems like cdnjs imports every version.

Chris McCormick 2024-08-12T20:53:13.076919Z

Ok, thanks for figuring that out. I've pushed my latest prompt that works pretty well for generating small Reagent apps up here: https://github.com/chr15m/scittle-claude-ai

Chris McCormick 2024-08-12T20:55:26.306279Z

Here's another demo that was one-shotted with that prompt template to generate a "CSV viewer" web app: https://claude.site/artifacts/83ac7299-c152-4ef0-acdc-e3b8e696a379 Here's what I added in the customisation section of the prompt template: > Please write an application that allows the user to upload a CSV file and renders it in a table.

borkdude 2024-08-12T20:57:13.265769Z

that's pretty amazing

Chris McCormick 2024-08-12T21:01:24.672519Z

I find it impressive and a little bit frightening. 😅

borkdude 2024-08-12T21:26:26.502609Z

https://mastodon.social/@borkdude/112951158759568953

Clojurians Log v2

scittle