CodeGemma初探

什么是 CodeGemma

CodeGemma是一系列强大而轻量级的模型的集合，可以执行各种编码任务，包括填充中间代码补全、代码生成、自然语言理解、数学推理和指令跟随。

版本：

instruct：7B, 这个版本专门针对自然语言到代码聊天和指令跟随进行了调整。它的目标是能够理解自然语言输入，并根据指令生成相应的代码。
code：7B，这个版本是一个预训练的模型，专门用于代码补全和根据代码前缀和/或后缀生成代码。它的目标是提供更好的代码自动补全和生成功能。
2b：2B, 这个版本是一个最新的预训练模型，提供了最多两倍更快的代码自动补全功能。它的目标是提高代码补全的速度和效率。

优势：

智能代码补全和生成：无论你是在本地工作还是使用 Google Cloud 资源，都可以完成代码行、函数，甚至生成整个代码块。这意味着 CodeGemma 可以帮助你更快地编写代码，提高生产效率。
增强的准确性：CodeGemma 模型是基于主要来源于网络文档、数学和代码的 5000 亿令牌的数据进行训练的。因此，生成的代码不仅在语法上更加正确，而且在语义上更有意义，从而减少错误和调试时间。
多语言能力：CodeGemma 支持多种编程语言，包括 Python、JavaScript、Java、Kotlin、C++、C#、Rust、Go 等，这使得它适用于不同的项目和团队。
简化的工作流程：将 CodeGemma 模型集成到你的开发环境中，可以帮助你减少样板代码的编写，更快地专注于重要的和不同的代码编写，从而提高工作效率。

1. 安装

测试机环境：MacBook Air M1 16G
在使用CodeGemma之前，我们需要先安装Ollama，Ollama可以运行本地大语言模型，例如：Llama3、Gemma、qwen:7B等。

1.1 安装Ollama

Ollama官网：https://ollama.com/
进入官网后根据自己的操作系统，一顿无脑下载安装即可

请添加图片描述

1.2 安装

安装完成之后进入命令行工具，输入安装CodeGemma的命令，这里为了体验完整的功能，并且能与它进行自然语言交互，安装默认的 instruct 版本

ollama run codegemma

当看到如下界面则表示安装已完成
请添加图片描述

2. 使用

这里我们直接在命令行测试

2.1 PHP基础路由

CodeGemma支持多种编程语言，这里我们以PHP为例，尝试生成一个简单的路由

请添加图片描述
结果还是不错，结构很清晰，代码逻辑也是正确的，并且附有代码说明和注释。对中文的理解和输出也是到位的。

同样的提示词，我们再让ChatGPT 3.5 来帮我们生成一个路由，对比下:
请添加图片描述
可以看出CodeGemma使用类的方式，而ChatGPT使用的是纯函数的方式。都完成得不错。

2.2 Vue3基础组件

提示词：请使用vue3生成一个带prop emit的组件

CodeGemma生成结果：

以下是一个使用 Vue3 生成带 prop emit 的组件的示例：

<template>
  <div>
    <input v-model="inputValue" @input="emitInput">
    <button @click="emitButton">按钮</button>
  </div>
</template>

<script>
export default {
  props: {
    initialValue: String,
  },
  data() {
    return {
      inputValue: this.initialValue,
    };
  },
  methods: {
    emitInput() {
      this.$emit('input', this.inputValue);
    },
    emitButton() {
      this.$emit('button-click', this.inputValue);
    },
  },
};
</script>

说明：

该组件有两个 prop：initialValue 用于初始化输入框的值，emitInput 用于触发自定义事件。
组件使用 v-model 指令绑定输入框的值，并使用 @input 事件监听器监听输入框的变化。
当输入框的值发生变化时，emitInput 方法会触发自定义事件 input，并将新的值作为参数传递。
组件使用 @click 事件监听器监听按钮的点击事件，并使用 emitButton 方法触发自定义事件 button-click，并将当前输入框的值作为参数传递。

使用该组件：

<template>
  <my-component v-model:input-value="message" @input="handleInput" 
@button-click="handleButtonClick"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleInput(value) {
      this.message = value;
    },
    handleButtonClick(value) {
      console.log('按钮被点击，当前输入框的值为:', value);
    },
  },
};
</script>

说明：

该示例展示了如何使用 v-model 指令绑定输入框的值，并使用自定义事件监听器监听输入框的变化和按钮的点击事件。
handleInput 方法会更新 message 数据，并将新的值传递给 MyComponent 组件。
handleButtonClick 方法会打印出当前输入框的值。

希望这能够帮到您！

ChatGPT 3.5 生成结果：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">{{ buttonText }}</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    initialCount: {
      type: Number,
      default: 0
    },
    buttonText: {
      type: String,
      default: 'Click me'
    }
  },
  emits: ['incremented'],
  data() {
    return {
      count: this.initialCount
    };
  },
  methods: {
    increment() {
      this.count++;
      this.$emit('incremented', this.count);
    }
  }
});
</script>

在这个示例中，我们定义了一个名为 Counter 的组件。它接受三个 props：title、initialCount 和 buttonText。title 是一个必需的字符串，initialCount 是一个可选的数字，默认值为 0，buttonText 是一个可选的字符串，默认值为 “Click me”。

在模板中，我们展示了一个标题和一个按钮，点击按钮会触发 increment 方法。在 increment 方法中，我们递增了 count 属性，并使用 $emit 方法触发了名为 incremented 的自定义事件，并传递了 count 值。

你可以在父组件中使用该组件，并监听 incremented 事件来获取递增后的值。例如：

<template>
  <div>
    <counter title="My Counter" :initial-count="5" @incremented="handleIncrement"></counter>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleIncrement(value) {
      console.log('Counter incremented:', value);
    }
  }
});
</script>