davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Poking around OpenAI. (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://lethain.com/openai-exploration/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Poking around OpenAI.</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://lethain.com/openai-exploration/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>I haven’t spent much time playing around with the latest LLMs,
and decided to spend some time doing so. I was particularly curious
about the usecase of using embeddings to supplement user prompts
with additional, relevant data (e.g. supply the current status of their
recent tickets into the prompt where they might inquire about progress on
said tickets). This usecase is interesting because it’s very attainable
for existing companies and products to take advantage of, and I imagine it’s
roughly how e.g. Stripe’s GPT4 integration with their documentation works.</p>
<p>To play around with that, I created a script that converts all of my writing
into embeddings, tokenizes the user-supplied prompt to identify relevant sections
of my content to inject into an expanded prompt, and sent that expanded prompt
to OpenAI AI’s API.</p>
<p>You can <a href="https://github.com/lethain/openai-experiments/blob/main/corpus.py">see the code on Github</a>,
and read my notes on this project below.</p>
<h2 id="references">References</h2>
<p>This exploration is inspired by the recent work
by <a href="https://eugeneyan.com/writing/llm-experiments/#llm-tools-to-summarize-query-and-advise">Eugene Yan</a>
and <a href="https://simonwillison.net/2023/Apr/4/llm/">Simon Willison</a>.
I owe particular thanks to <a href="https://twitter.com/eugeneyan/status/1646336530695467010">Eugene Yan</a>
for his suggestions to improve the quality of the responses.</p>
<p>The code I’m sharing below is scrapped together from a number of sources:</p>
<p>I found none of the examples quite worked as documented, but ultimately I was able to get them working
with some poking around, relearning Pandas, and so on.</p>
<h2 id="project">Project</h2>
<p>My project was to make the OpenAI API answer questions with awareness of all of my personal writing from this blog,
<a href="https://staffeng.com">StaffEng</a> and <a href="https://infraeng.dev/">Infrastructure Engineering</a>.
Specifically this means creating embeddings from Hugo blog posts in Markdown to use with OpenAI.</p>
<p>You can <a href="https://github.com/lethain/openai-experiments/blob/main/corpus.py">read the code on Github</a>.
I’ve done absolutely nothing to make it easy to read, but it is a complete example, and you could use
it with your own writing by changing <a href="https://github.com/lethain/openai-experiments/blob/main/corpus.py#L112">Line 112</a>
to point at your blog’s content directories. (Oh, and changing the prompts on <a href="https://github.com/lethain/openai-experiments/blob/main/corpus.py#L260">Line 260</a>.</p>
<p>You can see a screenshot of what this looks like below.</p>
<p><img src="/static/blog/2023/openai-experiment.png" alt="Screenshot of terminal program running Github lethain/openai-experiment"></p>
<p>This project is pretty neat, in the sense that it works. It did take me a bit longer than expected, probably about three hours
to get it working given some interruptions, mostly because the documentation’s examples were all subtly broken or didn’t actually connect
together into working code. After it was working, I inevitably spent a few more hours fiddling around as well.
My repo is terrible code, but is a full working code if anyone
else had similar issues getting the question answering using embeddings stuff working!</p>
<p>The other comment on this project is that I don’t really view this as a particularly effective solution to the problem I wanted to solve,
as it’s performing a fairly basic k-means algorithm to match tokenized versions of my blog posts against the query,
and then injecting the best matches into the GPT query as context. Going into this, I expected, I dunno, something more
sophisticated than this. It’s a very reasonable solution, and a cost efficient solution because it avoids any model (re)training,
but feels a bit more basic than I imagined.</p>
<p>Also worth noting, the total cost to developing this app and running it a few dozen times: $0.50.</p>
<h2 id="thoughts">Thoughts</h2>
<p>This was a fun project, in part because it was a detour away from what I’ve spent most of my time on the last few months,
which is writing my next book. Writing and editing a book is very valuable work, but it lacks the freeform joy of
hacking around a small project with zero users. Without overthinking or overstructuring things too much,
here are some bullet points thoughts about this project and expansion of AI in the industry at large:</p>
<ul><li>As someone who’s been working in the industry for a while now, it’s easy to get jaded about new things.
My first reaction to the recent AI hype is very similar to my first reaction to the crypto hype:
we’ve seen hype before, and initial hype is rarely correlated with long-term impact on the industry
or on society. In other words, I wasn’t convinced.</li><li>Conversely, I think part of long-term engineering leadership is remaining open to new things.
The industry has radically changed from twenty years ago, with mobile development as the most obvious proof point.
Most things won’t change the industry much, but some things will completely transform it,
and we owe cautious interest to these potentially transformational projects.</li><li>My personal bet is that the new AI wave is moderately transformative but not massively so.
Expanding on my thinking a bit, LLMs are showing significant promise at mediocre solutions to very general problems.
A very common, often unstated, Silicon Valley model is to hire engineers, pretend the engineers are
solving a problem, hire a huge number of non-engineers to actually solve the problem “until the technology automates it”,
grow the business rapidly, and hope automation solves the margins in some later year.
LLM adoption should be a valuable tool in improving margins in this kind of business,
which in theory should enable new businesses to be created by improving the potential margin.
However, we’ve been in a decade of <a href="https://www.readmargins.com/p/zirp-explains-the-world">zero-interest-rate policy</a>
which has meant that current-year margins haven’t mattered much to folks,
which implies that most of these ideas that should be enabled by improved margins should
have already been attempted in the preceeding margin-agnostic decade.
This means that LLMs will make those businesses better, but the businesses themselves should
have already been tried, and many of them have failed ultimately due to market size preventing
required returns moreso than margin of operating their large internal teams to mask over missing margin-enhancing technology.</li><li>If you ignore the margin-enhancement opporunties represented by LLMs,
which I’ve argued shouldn’t generate new business ideas but improve existing business ideas already
tried over the last decade, then it’s interesting to ponder what the sweet spot is for these tools.
My take is that they’re very good at supporting domain experts, where the potential damaged caused by
inaccuracies is constrained, e.g. Github Copilot is a very plausible way to empower a proficient programmer,
and a very risky way to train a novice in a setting where the code has access to sensitive resources or data.
However, to the extent that we’re pushing experts from authors to editors, I’m not sure that’s an actual speed
improvement for our current generation of experts, who already have mastery in authorship and (often) a lesser
skill in editing. Maybe there is a new generation of experts who are exceptional editors first, and authors second,
which these tools will foster. If that’s true, then likely the current generation of leaders is unable to
assess these tools appropriately, but&amp;mldr; I think that most folks make this argument about most new technologies,
and it’s only true sometimes. (Again, crypto is a clear example of something that has not overtaken existing
technologies in the real world with significant regulatory overhead.)</li></ul>
<p>Anyway, it was a fun project, and I have a much better intuitive sense of what’s possible
in this space after spending some time here, which was my goal. I’ll remain very curious to
see what comes together here as the timeline progresses.</p>
<p class="mt6 instapaper_ignoref"></p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>