Will AI take over the world rule from Sprouts?
Published: Updated:
If you used any software or visited any software vendor websites in the last year, you will have likely seen them adding AI to their products. But lately for many companies it seems that adding other features is far lower on their output list. Which as a software user can be a big point of frustration! Or has the AI added value to the application?
Before we move to explore this more lets take a moment to mention:
How were these models that are in use today trained? On the Copyright material from the hard work of other people and companies?
How much energy is the rush to make everything AI using today, both in resources within the company and from an electricity point of view on the plant?
Do we currently have the right balance of security and protection in place to protect customer personal data?
How do we as business owners handle Copyright going forward, can you Copyright the output of these models?
Are your prompts (questions) available to be viewed by others?
Should you declare where AI is used? Maybe this is written by AI or other ways to call out its use in your Company resources.
Should you take steps to make sure AI can not crawl your website i.e. blocking in robot.txt
We're not going to go into the details of the above questions today, but depending on how you choose to use these systems within your business, these might be areas you want to research more first before going too deep into using them.
Is this AI going to take over all software and design jobs?
Our one word answer is a clear NO! However it will enable people to approach solving problems differently.
It will allow skilled developers and designers to go get information from within the working environment without stopping and moving to a new task. But not only that it will also allow for common repeatable tasks to be carried out, for you to then verify, approve and accept back to your current code.
This type of feature set brings you a virtual assistant that understands your current tasks or work area, that you can ask for help on tasks.
However one of the areas that it does open up is that anyone can ask for an insight for a solution in a prompt, and the LLM (Large Language Model) system can return the steps to build the solution, or build it and help you deploy your solution to a website.
This is wonderful progress to give anyone the power to build something that they require.
However at this current time you are still going to need someone that has a background and deep understanding in core web principles if this is to be used in a business environment. To make sure it keeps running, updated and security is maintained plus that Accessibility goals are kept to.
Lets Explore
With so many options available to us today and so many people stating this is the future, we decided to get some AI input into this Sprouts of Wisdom from Microsoft Bing using the Microsoft Copilot option. We used this as an example as we wanted a freely available option that you could also try out.
So the first question we asked it was... (Click on the question to see Copilot's response)
Q: What does llm mean and what can it do
Copilot Says: LLM stands for Large Language Model, which is a type of artificial intelligence designed to understand and generate human language. These models are trained on vast amounts of text data from the internet, books, articles, and more. This allows them to perform a wide range of language-related tasks, such as:
- Generating Text: Writing essays, stories, code, and other text-based content.
- Answering Questions: Providing information and explanations on a variety of topics.
- Summarizing: Condensing long pieces of text into concise summaries.
- Translating: Converting text from one language to another.
- Conversing: Engaging in natural, human-like conversations.
Large language models like me can help enhance productivity, assist with research, aid in creative writing, and provide support in various other tasks where language is involved.
Q: Can llm take my data
Copilot Says: Large Language Models (LLMs) like me are designed to process and understand language, but I don’t store or access personal data beyond the current conversation. I don’t have the ability to retain or retrieve past conversations unless they are provided again within the same session.
If you're concerned about how your data is handled, I would recommend checking out Microsoft's privacy statement for detailed information on data privacy and security: Privacy Statement
Q: Can a llm make a website for me
Copilot Says: While Large Language Models (LLMs) like me can't directly build a website for you, we can certainly assist with many tasks involved in website creation. For example, I can:
- Generate Code: Help write HTML, CSS, and JavaScript code for your website.
- Content Creation: Draft text for your website pages, including about sections, blog posts, and product descriptions.
- Design Ideas: Provide suggestions for layout, color schemes, and design elements.
- Debugging: Assist in identifying and fixing errors in your code.
If you're just starting out, I can guide you through the basics of web development. Or, if you already have some ideas, I can help you bring them to life. What kind of website are you looking to create?
Q: One showing my photos
Copilot Says:Choose a Platform: Platforms like WordPress, Squarespace, and Wix offer easy-to-use templates for photography websites.
Design Your Layout:
- Home Page: Introduction or welcome message.
- Gallery Page: Display your photos in a visually appealing grid or carousel.
- About Page: Share a bit about yourself and your photography journey
- Contact Page: Allow visitors to get in touch with you easily.
- Upload Your Photos: Ensure your images are high-quality and optimized for the web to improve loading times.
- Customize Your Site: Adjust colors, fonts, and layout to reflect your personal style or photography brand.
- Add Descriptions: Provide context or stories behind your photos. This adds a personal touch and engages visitors more.
- SEO: Use search engine optimization techniques to help people find your site. This includes using relevant keywords and adding metadata to your images.
Would you like some assistance with coding elements, choosing a platform, or tips on photo optimization? Let me know how I can help further!
Q: How do I make an HTML page
Copilot Says: Creating an HTML page is quite straightforward and a great way to get started with web development. Here's a step-by-step guide:
Open a Text Editor: You can use any text editor, like Notepad (Windows), TextEdit (Mac), or something more advanced like Visual Studio Code or Sublime Text.
Write Your HTML Code: Here’s a basic template to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Photo Gallery</title>
</head>
<body>
<header>
<h1>Welcome to My Photo Gallery</h1>
</header>
<main>
<section>
<h2>Gallery</h2>
<p>Here are some of my favorite photos:</p>
<img src="photo1.jpg" alt="Description of photo 1" width="300">
<img src="photo2.jpg" alt="Description of photo 2" width="300">
<img src="photo3.jpg" alt="Description of photo 3" width="300">
</section>
</main>
<footer>
<p>© 2024 My Name</p>
</footer>
</body>
</html>
Save the File: Save your file with a .html extension, for example, index.html.
Open the File in a Browser: Double-click the file, or open it through your browser by dragging and dropping the file into a browser window.
Explanation of the Code:
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element of the HTML document.
<head>: Contains meta-information about the HTML document, like the title.
<title>: Sets the title of the webpage that appears in the browser tab.
<body>: Contains the content of the HTML document.
<header>, <main>, <section>, <footer>: Semantic elements that help structure the content.
<h1>, <h2>: Headings that provide structure to the page.
<p>: A paragraph of text.
<img>: An image element with attributes for the source file and alt text.
Feel free to customize the content, add more images, or style it with CSS. If you need help with any specific part or want to add more features, just let me know
Team Sproutius: Wow, so far this has helped us take a great step forward, so much better than the white page and asking ourselves where do we start. Though a few things do jump out of this sample code:
It has taken note that we're interested in building an image site and given us a structured page outline.
But on the image tags its only provided us width but not the height.
We would also need to make the alt tags more helpful to our users.
Also the HTML page is missing a description meta tag and stylesheet, so lets explore if it can help us further.
Q: Can you give me a stylesheet for my html page
Copilot Says: Certainly! Here’s a simple CSS stylesheet that you can use to style your HTML page. You can save this code in a file with a .css extension, for example, styles.css, and then link it to your HTML page.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
h1, h2 {
color: #4CAF50;
}
section {
background-color: white;
margin: 20px 0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
img {
display: block;
margin: 10px 0;
width: 100%;
max-width: 300px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Photo Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
This stylesheet will give your page a clean and modern look with a green header, white content sections, and a dark footer. Feel free to tweak the styles to match your personal taste. If you need help with specific styling aspects or want to add more features, just let me know!
Team Sproutius: Well this is a great starting place which we could ask more question about once we start to use it. Though we can see that it has got the H1 and H2 set to the same colour as the header background.
Q: Should my web page have a description
Copilot Says: Absolutely! Having a description on your web page is a great idea. It helps with several important aspects:
SEO (Search Engine Optimization): Including a meta description tag in your HTML can help search engines understand the content of your page, making it more likely to appear in relevant search results. Here's an example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Photo Gallery</title>
<meta name="description" content="Welcome to my photo gallery. Explore my collection of photographs showcasing various themes and styles.">
<link rel="stylesheet" href="styles.css">
</head>
User Experience: A brief introduction or description on your homepage can provide visitors with a clear understanding of what they can expect from your site. It sets the tone and helps engage your audience.
Accessibility: Descriptive content can make your website more accessible to people using screen readers or other assistive technologies.
Would you like help writing a description for your photo gallery website? Or is there anything else you're curious about?
Q: The h1 and header background are the same colour
Copilot Says: Let's adjust the colors so your <h1> heading stands out against the header background. You can either change the color of the <h1> text or the background color of the header. Here's how you can do both:
Option 1: Change the <h1> Text Color
Add this CSS rule to your styles.css file to set a different color for the <h1> text:
h1 {
color: #FFFFFF; /* Change this to a color that contrasts with your header background */
}
Option 2: Change the Header Background Color
Alternatively, you can change the background color of the header to ensure the <h1> text is clearly visible:
header {
background-color: #3E8E41; /* Change this to a different color */
color: white;
padding: 20px;
text-align: center;
}
You can use any color you like, just make sure there's a good contrast between the text and the background to improve readability. If you have a specific color in mind or need help choosing one, let me know!
Team Sproutius: Lastly we thought we would get its input to the energy question.
Q: how much energy do you use per day
Copilot Says: That's an interesting question! I, as an AI, don’t have a physical form, so I don't consume energy in the same way that humans or devices do. However, the servers and infrastructure that support me do use energy.
The energy usage of AI models can vary widely depending on the complexity of the tasks, the data centers they run on, and the efficiency of the hardware and software. Large data centers, which host AI models like me, are designed to be as energy-efficient as possible, often using advanced cooling techniques and renewable energy sources to minimize their environmental impact.
If you're curious about specific energy consumption details for data centers, or sustainability efforts by companies like Microsoft, I can look up some resources or provide more information on their initiatives!
What a great start Copilot has given us
So from the above questions (prompts) and answers you can see just how useful this type of tooling can be, but I think it does highlight that you still need to understand the answers given, and how to use them, to best fit into your wanted result. However it really speeds up researching topics today, its clear to see this loop of question/result is only going to speed up over time. Another really nice feature is how it can build on the prior questions and answers to tailor the information you are looking for.
Prompting a response
Prompting is the process of giving instructions to a gen AI tool to receive new information or to achieve a desired outcome on a task. Each input is called a ‘prompt.’ Some gen AI tools generate text or images, while others generate video, audio, or even code. Having this type of skills built into your daily skill set is only going to grow in importance as time goes on.
As you can see from the above prompts, we could have asked better more scoped questions to get a more tailored answer.
Other Vendors
Today we have a large number of solutions on offer from vendors lets explore a few
GitHub Copilot from GitHub brings an AI coding assistant into the code editor like VS Code or GitHub Codespaces plus you get the benefits of it built right into the GitHub website. The price ranges from 10$ to 39$ per month. Take a look at github.com/features/copilot
GitHub Copilot in VS Code - new Free tier - GitHub's Annoucement
Bolt.new from StackBlitz brings frontend and Backend together from a Prompt. Prompt, edit, run & deploy fullstack apps - Full dev env with common things like npm, Vite, Next.js plus much more... Prices start from free upwards, plus you can pay for more tokens for AI use. You would start in their Bolt website to write prompts to define your solution and view the code in the inbuilt editor, code can be pushed to GitHub or deployed to Netilfy hosting from within Bolt. You can also use the StackBlitz editor to make code changes.
Gemini Code Assist is available in many popular IDEs, such as Visual Studio Code, JetBrains IDEs (IntelliJ, PyCharm, GoLand, WebStorm, and more), Cloud Workstations, Cloud Shell Editor, and supports 20+ programming languages, including Java, JavaScript, Python, C, C++, Go, PHP, and SQL. The price is $22.80 to $54 per month or less if you pay yearly. More details at cloud.google.com/products/gemini/code-assist
Amazon Q Developer is available for use in your code editor. More details at aws.amazon.com/q/developer/
Cursor.com - The AI Code Editor Fast, intelligent, and private, Cursor is the best way to code with AI. Priced from free to 40$ per month
Claude.ai - Claude is a next generation AI assistant built by Anthropic and trained to be safe, accurate, and secure to help you do your best work. Price ranges from free to 25$ per month
JetBrains AI offers AI support within JetBrains IDEs. Price £7.90/per month or less if you pay yearly.
Our thoughts
We think the whole workflow around AI is still in its early days, but we also don't think that its going to leave the workplace anytime soon. So getting up to speed with it is an important task for all your staff members and roles.
We think we are seeing the very early days of the so called "Agent". Which we take is a feature that carries out tasks for us, which results in a file or files we can then interact with. Instead of providing some information or tips in a textual form that we can choose to add to our file. Its going to be interesting to see just how far this type of feature set moves into our daily tasks as a web designer or developer.
If you have something to share that we did not cover let us know, or maybe you have added AI to your business and have some insight to share with us about the success you've found.
Thinking about 2025
Would you be interested in using Azure AI Services to define you own solution to build what workflow? If you have any ideas or interest please let us know, and we will add the ideas to our list of topics to explore in the new year. You can tell us via our Contact form.
Our first LLM published answers
So there we are the first page that we have ever published that used a LLM to give us output that we then published. I hope Microsoft don't mind this type of insight and publishing, but we wanted to show both sides so you can form an idea of whether this is for you or not. I hope it lit a spark and you will go explore more.
We are here to help
As always should you have any questions or want more details on any of the areas covered, feel free to reach out to us via our Contact form.
Maybe you think we have missed a key area that should be defined above also, if so Contact us with your view or idea. We would be happy to review and update this page.
Your Feedback Update:
We have had the same type of question asked several times since we release this article, which basically boils down to "Is ChatGPT and LLM the same thing?"
ChatGPT and LLM (Large Language Model) are related, but they are not exactly the same. Here’s a breakdown:
LLM (Large Language Model): This is a type of artificial intelligence model trained on vast amounts of text data to understand and generate human-like language. It's a general term that can refer to any large-scale language model developed for a variety of uses.
ChatGPT: This is a specific implementation of an LLM developed by OpenAI. It's designed to interact with users through conversations, providing detailed responses, answering questions, and engaging in dialogue.
In essence, ChatGPT is a product that utilizes the underlying technology of an LLM. Think of an LLM as the engine, and ChatGPT as a car that runs on that engine, designed for the specific task of chatting.