<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Christina Zhu</title>
    <description>The latest articles on DEV Community by Christina Zhu (@cszhu).</description>
    <link>https://dev.to/cszhu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2456%2F723c4a76-9ad2-4280-9b51-884f689c1687.jpeg</url>
      <title>DEV Community: Christina Zhu</title>
      <link>https://dev.to/cszhu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cszhu"/>
    <language>en</language>
    <item>
      <title>Ray Summit 2025 Call for Papers is Due June 30, 2025</title>
      <dc:creator>Christina Zhu</dc:creator>
      <pubDate>Mon, 09 Jun 2025 22:40:02 +0000</pubDate>
      <link>https://dev.to/cszhu/ray-summit-2025-call-for-papers-is-due-june-30-2025-2l85</link>
      <guid>https://dev.to/cszhu/ray-summit-2025-call-for-papers-is-due-june-30-2025-2l85</guid>
      <description>&lt;p&gt;&lt;a href="https://www.anyscale.com/ray-summit/2025" rel="noopener noreferrer"&gt;Ray Summit 2025&lt;/a&gt; is coming back to San Francisco on November 3rd - 5th, 2025!&lt;/p&gt;

&lt;p&gt;Do you know what it takes to productionize AI applications? Are you facing the real-world challenges of scaling systems and teams?  Don’t miss your chance to join leading voices in the space. The Call for Proposals (CfP) is open to all, and we highly encourage you to submit your ideas, even if you are a first-time speaker.&lt;/p&gt;

&lt;p&gt;If you need inspiration, check out the talks from &lt;a href="https://www.anyscale.com/ray-summit/2024#keynotes" rel="noopener noreferrer"&gt;Ray Summit 2024&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  How to Submit
&lt;/h3&gt;

&lt;p&gt;Please submit your session &lt;a href="https://raysummit.anyscale.com/flow/anyscale/raysummit2025/callforpapers/login?_gl=1*17w1bfu*_gcl_au*MTg1MzkwODQxMS4xNzQ3MTgwNzY5LjIzNjgyOTg2My4xNzQ5NTA2ODg5LjE3NDk1MDY4ODg.*_ga*MjA4MDgyMzAxNC4xNzQ3NjkwNzM4*_ga_T6EXHYG44V*czE3NDk1MDY4MzgkbzUkZzEkdDE3NDk1MDg0MTkkajckbDAkaDY0NzQ4MDcwMA.." rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Talk Tracks
&lt;/h3&gt;

&lt;p&gt;There are two session lengths: 30 minute breakout sessions or 15 minute lightning talks. Please select a session length based on the depth of your presentation. (&lt;em&gt;Tip: Think about what you want the audience to walk away with. If it’s 1-2 key points, a lightning talk will fit better, but if you’re aiming for a more comprehensive understanding, aim for a breakout session.&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;You’ll also be asked to select a talk track. Please select the talk track most closely aligned with your proposed session:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ray Ecosystem:&lt;/strong&gt; Talks that explore the tools and integrations that expand Ray's ecosystem.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ray in Production:&lt;/strong&gt; Success stories about how your team scaled Ray effectively, taking it from theory to practice.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI / ML Applications:&lt;/strong&gt; Sessions sharing how teams are powering diverse AI/ML applications with Ray's scalable computing capabilities.

&lt;ul&gt;
&lt;li&gt;Data workloads&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Research Frontiers:&lt;/strong&gt; Sessions that explore the future of distributed computing through pioneering research.&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Generative AI:&lt;/strong&gt; Tips for building and scaling generative AI, plus how Ray enables large-scale generative AI workflows.

&lt;ul&gt;
&lt;li&gt;LLM (Large Language Models)&lt;/li&gt;
&lt;li&gt;Agents&lt;/li&gt;
&lt;li&gt;MCP (Model Context Protocol)&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;vLLM:&lt;/strong&gt; Sessions showcasing how to build high-throughput, low-latency inference services using the vLLM library.&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Multimodal Data:&lt;/strong&gt; Presentations on integrating and analyzing multimodal datasets, whether that be image, text, video, with Ray.&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Post - Training &amp;amp; Reinforcement Learning:&lt;/strong&gt; Talks on advanced model adaptation techniques and reinforcement-learning strategies using Ray.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;All sessions will be considered, but submitting a session proposal does not guarantee you a spot on the agenda. We’ll be contacting session speakers for next steps in early August. All accepted speakers will receive complimentary passes for the event. &lt;/p&gt;

&lt;h3&gt;
  
  
  First time submitter? Don’t be nervous.
&lt;/h3&gt;

&lt;p&gt;The Ray community is a great place to learn more about scalable computing and artificial intelligence. We highly encourage first-time submitters to submit talks at Ray Summit. If you’re unsure about your proposal or would like feedback or guidance, please reach out to us at &lt;a href="mailto:raysummit@anyscale.com"&gt;raysummit@anyscale.com&lt;/a&gt;, and we'll be happy to work with you on your proposal. &lt;/p&gt;

</description>
      <category>ai</category>
      <category>cfp</category>
      <category>ray</category>
      <category>conference</category>
    </item>
    <item>
      <title>Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror</title>
      <dc:creator>Christina Zhu</dc:creator>
      <pubDate>Mon, 13 Mar 2023 17:27:38 +0000</pubDate>
      <link>https://dev.to/retool/building-an-ai-regex-editor-with-retool-openai-and-codemirror-51nb</link>
      <guid>https://dev.to/retool/building-an-ai-regex-editor-with-retool-openai-and-codemirror-51nb</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fretool.com%2Fblog%2Fcontent%2Fimages%2F2023%2F03%2Fai-regex-editor-banner.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fretool.com%2Fblog%2Fcontent%2Fimages%2F2023%2F03%2Fai-regex-editor-banner.png" alt="Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Every developer has struggled with &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions?ref=retool.com" rel="noopener noreferrer"&gt;regular expressions&lt;/a&gt; (RegEx) at some point in their career. While incredibly powerful and versatile, they are also notoriously unintuitive and difficult to learn, causing many developers to facepalm in frustration. Knowing that this is a typical issue that developers face, we’ve built a super cool, human-friendly RegEx generator that utilizes &lt;a href="https://platform.openai.com/docs/introduction?ref=retool.com" rel="noopener noreferrer"&gt;OpenAI’s GPT-3&lt;/a&gt; and &lt;a href="https://codemirror.net/?ref=retool.com" rel="noopener noreferrer"&gt;CodeMirror&lt;/a&gt; on Retool to automate and make RegEx more accessible to developers. Simply describe what you want the RegEx to do, and our friendly AI Developer will translate that into Javascript code for you. Let’s dive in and see how this app works together!&lt;/p&gt;

&lt;p&gt;Before we get started, make sure you've created a free &lt;a href="https://retool.com/?ref=retool.com" rel="noopener noreferrer"&gt;Retool&lt;/a&gt; account and have your &lt;a href="https://openai.com/blog/openai-api?ref=retool.com" rel="noopener noreferrer"&gt;OpenAI API Key&lt;/a&gt; and &lt;a href="https://docs.retool.com/docs/openai-integration?ref=retool.com" rel="noopener noreferrer"&gt;resource integration ready to go&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Here is a link to the &lt;a href="https://gist.github.com/cszhu/39f23bf6c5e93b9463c93fa54133847d?ref=retool.com" rel="noopener noreferrer"&gt;JSON of the app&lt;/a&gt; if you'd like to edit it yourself.&lt;/p&gt;

&lt;h3&gt;
  
  
  Overview
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fj5eKxqSzhewGOtZfsKqOLgh6suJzH20ibkOhagDUx2TpotijW9F94SCLrpSpsDl8Mrb9YRJQaFDv17rF5uiAMV2cLDQ_Z_Yk0jnFRY5_4z0EeahWN34nxFkvb38VrM-Srjb26Bfrl-vovALq3QB6ogU" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fj5eKxqSzhewGOtZfsKqOLgh6suJzH20ibkOhagDUx2TpotijW9F94SCLrpSpsDl8Mrb9YRJQaFDv17rF5uiAMV2cLDQ_Z_Yk0jnFRY5_4z0EeahWN34nxFkvb38VrM-Srjb26Bfrl-vovALq3QB6ogU" alt="Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Showing off the AI RegEx Developer tool&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This AI-powered RegEx code editor combines CodeMirror and OpenAI inside Retool to make working with regular expressions as easy as chatting with your coworker. To use it, simply write a sentence about the type of RegEx you want it to capture - for example, you might want to create a RegEx that captures all the numbers in a sentence, or capture all the text before a comma. Once you’ve described it, click Generate Code to generate the corresponding JavaScript code on the right-hand panel, which also includes the &lt;code&gt;Run&lt;/code&gt; and &lt;code&gt;Reset&lt;/code&gt; buttons to execute the code and see the results of the RegEx. The app also includes a handy prompt history on the left panel, which helps you keep track of your previous prompts!&lt;/p&gt;

&lt;p&gt;Today we will be breaking this app down into four parts and going through how to do each of them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The OpenAI API resource call&lt;/li&gt;
&lt;li&gt;The basic UI in Retool&lt;/li&gt;
&lt;li&gt;Using custom components to create our CodeMirror editor&lt;/li&gt;
&lt;li&gt;Using temporary variables to keep track of the state of our app&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  OpenAI Resource Setup
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fhirh4B8yWol9A9loRglc_9eY1D5BSOImgvK9SZpfJra-oZskq6LENsAhrBwqA9eLnjBhdYseNnP3g5_3vzkJXt9zXq7fzaJZz9cxE__yWID5z86S5wRSAaHvrxpDvm0GGUB48hqvzbe7Bj85v1YWvD0" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fhirh4B8yWol9A9loRglc_9eY1D5BSOImgvK9SZpfJra-oZskq6LENsAhrBwqA9eLnjBhdYseNnP3g5_3vzkJXt9zXq7fzaJZz9cxE__yWID5z86S5wRSAaHvrxpDvm0GGUB48hqvzbe7Bj85v1YWvD0" alt="Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first part of the app is powered by an OpenAI API call to their text model. Our &lt;a href="https://docs.retool.com/docs/openai-integration?ref=retool.com" rel="noopener noreferrer"&gt;Retool OpenAI integration guide&lt;/a&gt; provides step-by-step instructions on how to set up your very own OpenAI resource, so be sure to check that out! Once you’ve set that up, you can start using it in your app. Our app uses the &lt;code&gt;text-davinci-003&lt;/code&gt; model of OpenAI to generate RegEx patterns and combined them with the &lt;code&gt;RegExPrompt.value&lt;/code&gt; in Retool to pass our prompt to OpenAI. We also set our &lt;code&gt;top_p&lt;/code&gt; to 1 and &lt;code&gt;temperature&lt;/code&gt; to 0.7 - these values determine the “creativity” and “randomness” of our generated RegEx expressions, which should still be reliable and accurate but also offers a bit of variation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Retool UI Components
&lt;/h3&gt;

&lt;p&gt;In creating our AI RegEx Developer app, we utilized several different Retool UI components to make it come to life and make it user-friendly. Retool components are prebuilt, modular, and reusable interface elements that are designed to display data in an easy drag-and-drop interface. These components have an internal state and can trigger events based on user interactions, enabling us to perform actions and queries. Additionally, Retool offers preset for commonly used configurations, which we utilized in our app.&lt;/p&gt;

&lt;p&gt;We utilize the following components in our application:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://retool.com/components/text-area?ref=retool.com" rel="noopener noreferrer"&gt;Text Area&lt;/a&gt; - Used to display text, such as previous prompts&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://retool.com/blog/introducing-the-sidebar-frame-create-intuitive-interfaces-for-complex-apps/" rel="noopener noreferrer"&gt;Sidebar&lt;/a&gt; - A navigation component that we used to show our prompt history using the navigation properties.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://retool.com/components/text-input?ref=retool.com" rel="noopener noreferrer"&gt;Text Input&lt;/a&gt; - Used to get the prompt from the user, as well as ask the user for test strings to run the code on&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://retool.com/components/button?ref=retool.com" rel="noopener noreferrer"&gt;Buttons&lt;/a&gt; - Combined with our event handlers to run our OpenAI, CodeMirror and prompt history queries and control most user interactions&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  CodeMirror &amp;amp; Custom Components
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FdLVg1KRkWTmiwWqMWOmJgrCHS8BDdLiEpW7EjaF52NYhGaTcI1z6RQSwpS6v15oJGiY1mjnxGO4KxuhD6lp-utHAvPDvhfAdh4m52HErogWizPvEodlReJU1ioHOQHTlrzUrCzSMowvS5s0ksY-ml3E" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FdLVg1KRkWTmiwWqMWOmJgrCHS8BDdLiEpW7EjaF52NYhGaTcI1z6RQSwpS6v15oJGiY1mjnxGO4KxuhD6lp-utHAvPDvhfAdh4m52HErogWizPvEodlReJU1ioHOQHTlrzUrCzSMowvS5s0ksY-ml3E" alt="Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Now that we have our prompt for our RegEx as well as an example piece of RegEx from OpenAI, we need to put it in our CodeMirror editor to test and execute it. This component uses CodeMirror to edit code and evaluate it and provides a way for us to test it directly inside our Retool app. We utilize &lt;a href="https://docs.retool.com/docs/custom-components?ref=retool.com" rel="noopener noreferrer"&gt;custom components&lt;/a&gt; in Retool to get this working, which allows us to extend Retool’s functionality beyond what’s currently possible with our component library.&lt;/p&gt;

&lt;p&gt;Our custom CodeMirror component has 3 main sections: an iFrame, a model, and a script. The iFrame includes references to the necessary CodeMirror styles and scripts, such as the CSS and the Javascript library needed to run it. The model code section defines the data model for our custom component, which includes the RegEx that we want to evaluate, the test strings that we input, and other information such as our last run index.&lt;/p&gt;

&lt;p&gt;The script section of the code contains the bulk of our component logic, including functions for initializing our CodeMirror editor, setting and running the code, as well as handling the majority of the updates to the data model from Retool.&lt;/p&gt;

&lt;p&gt;When our model is updated, the component then checks if our RegEx and test strings have changed since our last run. If they have, our component updates the text inside the CodeMirror editor to include the new data, and then runs this once a test run is requested, we print the results in the Retool app in our &lt;code&gt;RegExMatchesDisplay&lt;/code&gt; &lt;a href="https://retool.com/components/text-area?ref=retool.com" rel="noopener noreferrer"&gt;textArea component&lt;/a&gt;.  &lt;/p&gt;

&lt;h3&gt;
  
  
  Temporary State &amp;amp; Variables
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FyobvOfrdDirR3Go0eos8857id-D4g3CbuftQD090x8R6cohBjsqmv4F6bvHdTOqUVDMSpLF3O8r22Fvtj9EbxPmttNkeco8f_qIInCJtIoBds7yHOczBX08nrNlVFG9XzCk_Pa_Eg_KQkNgTI1Jlwd0" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FyobvOfrdDirR3Go0eos8857id-D4g3CbuftQD090x8R6cohBjsqmv4F6bvHdTOqUVDMSpLF3O8r22Fvtj9EbxPmttNkeco8f_qIInCJtIoBds7yHOczBX08nrNlVFG9XzCk_Pa_Eg_KQkNgTI1Jlwd0" alt="Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The last section of our application is the left-hand panel which uses &lt;a href="https://docs.retool.com/docs/temporary-state?ref=retool.com" rel="noopener noreferrer"&gt;temporary states&lt;/a&gt;in Retool to store our previous prompts to OpenAI. Temporary states are an essential feature in Retool that allows us to store and manipulate data, and in this app in particular, we use temporary states to keep track of various variables and user interactions, such as the previous prompts as well as the current RegEx and test strings.&lt;/p&gt;

&lt;p&gt;We track several different states here in our application, and here's a short explanation of all of them and what they're used for:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Temporary State Variable&lt;/th&gt;
&lt;th&gt;Explanation&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;currentRegExText&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stores the current RegEx being used in the app. Changes based on the OpenAI call.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;currentTestString&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The current test strings declared by the user&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;lastRunIndex&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Records the index of the last prompt that was run, and is updated whenever a prompt is run so that the app knows which prompt to run next.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;promptHistory&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Displays the previous prompts entered by the user and updated whenever a new prompt is entered&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;resetIndex&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stores the index at which the user wants to reset the prompt history&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;In conclusion, Retool is a very powerful platform for building quick tools to help enable developers to be more productive without having to write a ton of code. The key features that allow Retool to be so versatile are our ability to connect to various APIs such as OpenAI and our ability to create custom components, as shown above. By leveraging Retool’s query editors, temporary states, and components, we’re able to create custom tools such as this RegEx generator app that can help save time and improve a developer’s workflow. With Retool, the possibilities are endless, and we hope this blog post has inspired you to build your own little tools, wrappers, and applications in the future!&lt;/p&gt;

</description>
      <category>regex</category>
      <category>openai</category>
      <category>retool</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
